精华内容
下载资源
问答
  • ajax请求数据
    千次阅读
    2021-08-06 03:09:17

    使用ajax请求获取数据

    $.ajax({

    //要用post方式

    type: "get",

    //方法所在页面和方法名

    url: contextPath + '/tjbb/zhtjlist',

    contentType: "application/json; charset=utf-8",

    dataType: "json",

    data:"filters="+angular.toJson(filters)+"",

    success: function(data) {

    //清空数据

    $("#listbody").empty();

    //返回的数据用data.rows获取内容

    $.each(data.rows, function(i, item) {

    $("#listbody").append(

    "

    "+

    "

    " + item.storeName + "" +

    "

    现金消费"+

    "

    " + item.xjjf +""+

    "

    "+

    "

    "+

    "

    储值卡消费"+

    "

    " + item.czkxf +""+

    "

    "+

    "

    "+

    "

    交费合计"+

    "

    " + item.jfhj +""+

    "

    "+

    "

    "+

    "

    营业金额"+

    "

    " + item.yyje +""+

    "

    "+

    "

    "+

    "

    实收现金"+

    "

    " + item.ssxj +""+

    "

    "

    );

    });

    },

    error: function(err) {

    alert(err);

    }

    对应html代码:

    店名统计项金额

    更多相关内容
  • 使用ajax请求数据接口 (超详细~~~)

    千次阅读 2021-12-30 10:34:10
    快速了解ajax并且掌握ajax的使用方法

    什么是ajax?

    ajax---  async  javascript and xml 异步的js和xml
    主要时用来实现页面的局部刷新的一门技术
    核心对象 XMLHttpRequest

    使用方法

    1.实例化核心对象 var 变量名=new XMLHttpRequest()
    2.建立连接  变量名.open('请求方式','请求的路径','同步异步')
    3.发送请求,如果说要传参数,可以写在这个里面
    4.请求成功之后的接收
    变量名.onreadystatechange=function(){
            如果说当前的状态值 readystate为4并且status请求状态为200 证明成功
            接受返回数据 变量名.response
    }

    例:

    var xhr =new XMLHttpRequest()
    xhr.open('get','请求接口')
    xhr.send()
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4&&xhr.status==200){
        console.log(Json.parse(xhr.response))
    }
    }

    扩展:

    ajax和axios、fetch的区别

    Ajax 指的是 XMLHttpRequest, 最早出现的发送后端请求技术,属于原始js中,核心使用XMLHttpRequest对象,多个请求之间如果有先后关系的话,就会出现回调地狱

    JQuery ajax 是对原生XHR的封装,还增添了对JSONP的支持

    axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,本质上也是对原生XHR的封装,只不过它是Promise的实现版本,符合最新的ES规范

    fetch号称是AJAX的替代品,是在ES6出现的,使用了ES6中的promise对象。Fetch是基于promise设计的

    fetch不是ajax的进一步封装,而是原生js,没有使用XMLHttpRequest对象

    axios和fetch相比

    fetch比较轻量
    用法基本一样
    axios和fetch都是vue请求的插件

    展开全文
  • Ajax请求数据时添加遮罩

    千次阅读 2018-12-28 11:56:37
    1,Ajax请求时添加遮罩 项目常常会遇到Ajax发送数据,这个过程有一定的时间等待,在这个等待时间我们可以添加一个遮罩,让产品更具有人性化 特别注意: ajax 如果采用 sync:false 那么遮罩不能够显示, 不可以是...

    1,Ajax请求时添加遮罩

    项目常常会遇到Ajax发送数据,这个过程有一定的时间等待,在这个等待时间我们可以添加一个遮罩,让产品更具有人性化

    特别注意: ajax 如果采用  sync:false 那么遮罩不能够显示, 不可以是同步的,这是一个致命的弊端

    2,Ajax发送异步请求 //beforeSend方法ajax发送请求获取数据前   complete方法是请求成功发送

    $.ajax({
              type: "post",
              url: "undertakerRecordingController.do?doUndertakerCall",
              cache:false,
       data :params,
              beforeSend: function () {
                 load();
              },
              complete: function () {
                disLoad();
              },
              success: function(data){
             var d = $.parseJSON(data);
                  console.log(d);
                  var msg = d.msg;
                  if(d.success){
             tip(msg);
                      //按钮变灰
                     // $('#callButton').attr('disabled',"true");
                  }else{
                      tip(msg);
                      //$('#callButton').attr('disabled',"false");
          }
              },
       error: function (errorData) {
          console.log('error:'+errorData);
              }
          });

    3,load,diabload方法

    function load() {
           var fromobj=$("#formobj");
       $("<div class=\"datagrid-mask\"></div>").css({
               display: "block",
               width: "100%",
               height: fromobj.height()
           }).appendTo(fromobj);
       $("<div class=\"datagrid-mask-msg\"></div>").html("正在拨打中,请稍候。。。").appendTo(fromobj).css({
               display: "block",
               left: (fromobj.outerWidth(true) - 190) / 2,
               top: (fromobj.height() - 45) / 2
           });
       }
       //取消加载层
       function disLoad() {
       $(".datagrid-mask").remove();
           $(".datagrid-mask-msg").remove();
    
       }

    4,效果展示 遮罩成功显示

    展开全文
  • AJAX请求数据_demo

    万次阅读 2016-11-12 11:28:40
    1、用ajax请求json格式数据(javascript) 2、用ajax请求json格式数据(Jquery) 3、用jsonp请求json格式数据(Jquery) 页面只有实现两个功能(用get请求-获取数据 & 用post请求-设置修改数据)三个demo页面布局如下: ...

    本篇列举三个demo:
    1、用ajax请求json格式数据(javascript)
    2、用ajax请求json格式数据(Jquery)
    3、用jsonp请求json格式数据(Jquery)

    • 页面只有实现两个功能(用get请求-获取数据 & 用post请求-设置修改数据)三个demo页面布局如下:
    <h1>员工查询</h1>
    
    <label>请输入员工编号:</label>
    <input type="text" id="keyword" />
    <button id="search">查询</button>
    <p id="searchResult"></p>
    
    <h1>员工新建</h1>
    <label>请输入员工姓名:</label>
    <input type="text" id="staffName" /><br>
    <label>请输入员工编号:</label>
    <input type="text" id="staffNumber" /><br>
    <label>请选择员工性别:</label>
    <select id="staffSex">
    <option></option>
    <option></option>
    </select><br>
    <label>请输入员工职位:</label>
    <input type="text" id="staffJob" /><br>
    <button id="save">保存</button>
    <p id="createResult"></p>

    这里写图片描述

    • 其中demo1和demo2请求的一个php数据,PHP文件如下: serverjson.php:
    <?php
    //设置页面内容是html编码格式是utf-8
    // header("Content-Type: text/plain;charset=utf-8");//纯文本格式 
    header("Content-Type: application/json;charset=utf-8");//json字符串 
    //header("Content-Type: text/xml;charset=utf-8"); 
    //header("Content-Type: text/html;charset=utf-8"); 
    //header("Content-Type: application/javascript;charset=utf-8"); 
    
    //定义一个多维数组,包含员工的信息,每条员工信息为一个数组
    $staff = array
        (
            array("name" => "洪七", "number" => "101", "sex" => "男", "job" => "总经理"),
            array("name" => "郭靖", "number" => "102", "sex" => "男", "job" => "开发工程师"),
            array("name" => "黄蓉", "number" => "103", "sex" => "女", "job" => "产品经理")
        );
    
    //判断如果是get请求,则进行搜索;如果是POST请求,则进行新建
    //$_SERVER是一个超全局变量,在一个脚本的全部作用域中都可用,不用使用global关键字
    //$_SERVER["REQUEST_METHOD"]返回访问页面使用的请求方法
    if ($_SERVER["REQUEST_METHOD"] == "GET") {
        search();
    } elseif ($_SERVER["REQUEST_METHOD"] == "POST"){
        create();
    }
    
    //通过员工编号搜索员工
    function search(){
        //检查是否有员工编号的参数
        // isset检测变量是否设置;empty判断值为否为空
        //超全局变量 $_GET 和 $_POST 用于收集表单数据
        if (!isset($_GET["number"]) || empty($_GET["number"])) {
            echo '{"success":false,"msg":"参数错误"}';
            return;
        }
        //函数之外声明的变量拥有 Global 作用域,只能在函数以外进行访问。
        //global 关键词用于访问函数内的全局变量
        global $staff;
        //获取number参数
        $number = $_GET["number"];
        $result = '{"success":false,"msg":"没有找到员工。"}';
    
        //遍历$staff多维数组,查找key值为number的员工是否存在,如果存在,则修改返回结果
        foreach ($staff as $value) {
            if ($value["number"] == $number) {
                $result = '{"success":true,"msg":"员工编号:' . $value["number"] . 
                                ',员工姓名:' . $value["name"] . 
                                ',员工性别:' . $value["sex"] . 
                                ',员工职位:' . $value["job"] . '"}';
                break;
            }
        }
        echo $result;
    }
    
    //创建员工
    function create(){
        //判断信息是否填写完全
        if (!isset($_POST["name"]) || empty($_POST["name"])
            || !isset($_POST["number"]) || empty($_POST["number"])
            || !isset($_POST["sex"]) || empty($_POST["sex"])
            || !isset($_POST["job"]) || empty($_POST["job"])) {
            echo '{"success":false,"msg":"参数错误,员工信息填写不全"}';
            return;
        }
        //TODO: 获取POST表单数据并保存到数据库
    
        //提示保存成功
        echo '{"success":true,"msg":"员工:' . $_POST["name"] . ' 信息保存成功!"}';
    }
    
    ?>

    demo1、用ajax请求json格式数据(javascript)

    ajax访问serverjson.php的JS代码:

    <script>
    //get请求-查询数据
    var search=document.getElementById('search');
    var keyword=document.getElementById('keyword');
    var searchResult=document.getElementById('searchResult');
    search.onclick=function(){
        //1、创建XMLHttpRequest对象
        var xhr = new XMLHttpRequest();//非IE5、6
        //2、打开与服务器的链接
        xhr.open('get','serverjson.php?number='+keyword.value,true);
        //3、发送请求
        xhr.send();
        //4、响应请求
        xhr.onreadystatechange=function(){
            if (xhr.readyState===4) {//请求已完成
                if (xhr.status===200) {//
                    //json字符创转化为json对象
                    var data=eval('('+xhr.responseText+')');
                    if (data.success){
                        searchResult.innerHTML="找到员工:"+data.msg;
                    }else{
                        searchResult.innerHTML="出现错误:"+data.msg;
                    }
                }else{
                    alert('发生错误'+xhr.status);
                }
            }
        }
    }
    
    //post请求-修改数据
    var save=document.getElementById('save');
    var staffName=document.getElementById('staffName');
    var staffNumber=document.getElementById('staffNumber');
    var staffSex=document.getElementById('staffSex');
    var staffJob=document.getElementById('staffJob');
    var createResult=document.getElementById('createResult');
    save.onclick=function(){
        //1、创建XMLHttpRequest对象
        var xhr = new XMLHttpRequest();//非IE5、6
        //2、打开与服务器的链接
        xhr.open('post','serverjson.php',true);
        //post请求添加http头部信息
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        var data='name='+staffName.value
                +'&number='+staffNumber.value
                +'&sex='+staffSex.value
                +'&job='+staffJob.value;
        //3、发送请求-send中传入字符串
        xhr.send(data);
        //4、响应请求
        xhr.onreadystatechange=function(){
            if (xhr.readyState===4) {//请求已完成
                if (xhr.status===200) {//
                    var data=eval('('+xhr.responseText+')')
                    if (data.success) {
                        createResult.innerHTML="成功:"+data.msg;
                    }else{
                        createResult.innerHTML="错误:"+data.msg;
                    }
                }else{
                    alert('发生错误'+xhr.status);
                }
            }
        }
    }
    </script>

    demo2、用ajax请求json格式数据(Jquery)

    Jquery 实现AJAX数据请求:

    <script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js"></script>
    <script>
    $(document).ready(function(){ 
        $("#search").click(function(){ 
            $.ajax({ 
                type: "GET",    
                url: "serverjson.php?number=" + $("#keyword").val(),
                dataType: "json",
                success: function(data) {
                    if (data.success) { 
                        $("#searchResult").html(data.msg);
                    } else {
                        $("#searchResult").html("出现错误:" + data.msg);
                    }  
                },
                error: function(jqXHR){     
                   alert("发生错误:" + jqXHR.status);  
                },     
            });
        });
    
        $("#save").click(function(){ 
            $.ajax({ 
                type: "POST",   
                url: "serverjson.php",
                data: {
                    name: $("#staffName").val(), 
                    number: $("#staffNumber").val(), 
                    sex: $("#staffSex").val(), 
                    job: $("#staffJob").val()
                },
                dataType: "json",
                success: function(data){
                    if (data.success) { 
                        $("#createResult").html(data.msg);
                    } else {
                        $("#createResult").html("出现错误:" + data.msg);
                    }  
                },
                error: function(jqXHR){     
                   alert("发生错误:" + jqXHR.status);  
                },     
            });
        });
    });
    </script>

    demo3、用jsonp请求json格式数据(Jquery)

    • 其中demo3请求的一个php数据,PHP文件如下: serverjsonp.php:
    <?php
    header("Content-Type: application/json;charset=utf-8");
    
    //定义一个多维数组,包含员工的信息,每条员工信息为一个数组
    $staff = array
        (
            array("name" => "洪七", "number" => "101", "sex" => "男", "job" => "总经理"),
            array("name" => "郭靖", "number" => "102", "sex" => "男", "job" => "开发工程师"),
            array("name" => "黄蓉", "number" => "103", "sex" => "女", "job" => "产品经理")
        );
    
    //判断如果是get请求,则进行搜索;如果是POST请求,则进行新建
    //$_SERVER是一个超全局变量,在一个脚本的全部作用域中都可用,不用使用global关键字
    //$_SERVER["REQUEST_METHOD"]返回访问页面使用的请求方法
    if ($_SERVER["REQUEST_METHOD"] == "GET") {
        search();
    } elseif ($_SERVER["REQUEST_METHOD"] == "POST"){
        create();
    }
    
    //通过员工编号搜索员工
    function search(){
        $jsonp = $_GET["callback"];
        //检查是否有员工编号的参数
        //isset检测变量是否设置;empty判断值为否为空
        //超全局变量 $_GET 和 $_POST 用于收集表单数据
        if (!isset($_GET["number"]) || empty($_GET["number"])) {
            echo $jsonp . '({"success":false,"msg":"参数错误"})';
            return;
        }
        //函数之外声明的变量拥有 Global 作用域,只能在函数以外进行访问。
        //global 关键词用于访问函数内的全局变量
        global $staff;
        //获取number参数
        $number = $_GET["number"];
        $result = $jsonp . '({"success":false,"msg":"没有找到员工。"})';
    
        //遍历$staff多维数组,查找key值为number的员工是否存在,如果存在,则修改返回结果
        foreach ($staff as $value) {
            if ($value["number"] == $number) {
                $result = **$jsonp . '({"success":true,"msg":"找到员工:员工编号:' . $value["number"] .
                                ',员工姓名:' . $value["name"] . 
                                ',员工性别:' . $value["sex"] . 
                                ',员工职位:' . $value["job"] . '"})'**;
                break;
            }
        }
        echo $result;
    }
    
    //创建员工
    function create(){
        //判断信息是否填写完全
        if (!isset($_POST["name"]) || empty($_POST["name"])
            || !isset($_POST["number"]) || empty($_POST["number"])
            || !isset($_POST["sex"]) || empty($_POST["sex"])
            || !isset($_POST["job"]) || empty($_POST["job"])) {
            echo '{"success":false,"msg":"参数错误,员工信息填写不全"}';
            return;
        }
        //TODO: 获取POST表单数据并保存到数据库
    
        //提示保存成功
        echo '{"success":true,"msg":"员工:' . $_POST["name"] . ' 信息保存成功!"}';
    }
    
    ?>

    Jquery 实现-jsonp数据请求:

    <script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js"></script>
    <script>
    $(document).ready(function(){ 
        $("#search").click(function(){ 
            $.ajax({ 
                type: "GET",    
                url: "serverjsonp.php?number=" + $("#keyword").val(),
                **dataType: "jsonp",**
                **jsonp: "callback"**,
                success: function(data) {
                    if (data.success) {
                        $("#searchResult").html(data.msg);
                    } else {
                        $("#searchResult").html("出现错误:" + data.msg);
                    }  
                },
                error: function(jqXHR){     
                   alert("发生错误:" + jqXHR.status);  
                },     
            });
        });
    
        $("#save").click(function(){ 
            $.ajax({ 
                type: "POST",   
                url: "serverjsonp.php",
                data: {
                    name: $("#staffName").val(), 
                    number: $("#staffNumber").val(), 
                    sex: $("#staffSex").val(), 
                    job: $("#staffJob").val()
                },
                dataType: "json",
                success: function(data){
                    if (data.success) { 
                        $("#createResult").html(data.msg);
                    } else {
                        $("#createResult").html("出现错误:" + data.msg);
                    }  
                },
                error: function(jqXHR){     
                   alert("发生错误:" + jqXHR.status);  
                },     
            });
        });
    });
    </script>

    注意:jsonp能实现跨域请求,但只支持get请求,不支持post请求。

    三个demo请求结果:
    这里写图片描述

    展开全文
  • 5种常见ajax请求数据

    千次阅读 2017-07-08 17:14:55
    1.$.ajax()返回其创建的 XMLHttpRequest 对象。 $.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息。详细参数选项见下。 如果你指定了 dataType 选项,请确保服务器返回正确的 MIME 信息,(如 ...
  • 模拟ajax请求数据并进行页面渲染

    万次阅读 多人点赞 2018-05-09 17:19:00
    通过ajax请求数据后,进行页面渲染。注意:进行页面渲染的时候,只能用行间样式,要装饰页面。文件介绍1.goods.json,用于模拟后台接口数据[ { "price":"1000", "name":"...
  • JavaWeb将数据包装成JSON以及JSP通过ajax对JSON的获取与解析(代码实例) 运行环境:MyEclipse
  • Ajax请求数据之前、之后

    千次阅读 2019-06-03 13:19:12
    Ajax请求数据之前、之后 前端从后台请求数据,通常采用Ajax,在网络慢的情况下,页面会有空白页出现,为了解决这类问题,加载中通常会有一个loading样式,代表正在加载,此时就需要Ajax的beforeSend、complete方法;...
  • 我在用ajax请求数据的时候报错了 报错信息如下: ![图片说明](https://img-ask.csdn.net/upload/201805/18/1526632076_427193.png) 请求的数据一共四个,id title link addtime 百度查了下有人说格式错误,可是我...
  • ajax请求数据提示跨域

    2017-07-29 08:13:05
    ajax请求数据时提示跨域,单独用链接(接口地址)可以在本地获取到数据。Access-Control-Allow-Origin这些已经配置还是无效,返回数据是json格式![图片说明]...
  • 前端页面function subbtn() { $.ajax({ url: "/bdis", // 请求的URL type: "POST", // 请求方式 dataType: 'json', // 数据格式为json data:{ // 发送请求的json 数据 为键值
  • jQuery实现ajax请求

    千次阅读 2021-11-13 10:47:03
    jQuery实现ajax请求 在没学习jQuery之前,发送ajax是比较麻烦的一个过程,需要四个步骤,jQuery将这些个步骤简化了,使用起来更加方便快捷 相关函数 $.ajax() : 它是jQuery中实现ajax的核心函数 $.post() : 这个函数是...
  • 前端ajax请求后端数据时总是报404

    千次阅读 2022-01-24 23:17:08
    springboot使用Echarts组件生成动态图,要从后端获取数据,就写了个这样的前端: $.ajax({ type : "get", url : "/pre_homepage", cache : false, }) controller返回的是一个Json数组 万万没想到,整了一...
  • SSM中使用AJAX请求数据

    千次阅读 2018-08-05 19:18:24
    刚接触在ssm中使用ajax请求,之前用PHP来写的时候接收返回数据觉得挺简单的,但在java这边的ssm就有点不同了,在这里写一下刚测试成功的demo。 注:前端搭建就不累赘了,用js还是jq看个人喜好,个人觉得用jq来写...
  • JavaScript Jquery Ajax请求过程中常见数据处理场景小结 1、页面加载成功后,自动请求加载对应的函数方法 2、ajax函数方法封装,供其他方法调用 3、ajax请求值返回json或map,list等取值示例 4、Jquery id定位...
  • “循环数据--->>每5条数据放到一个里” 的效果   $.ajax({ url: "ajax/func.php", type: "POST", dataType: 'json', data: 'func=getU
  • ajax 请求数据库中的数据,展示在页面 问题描述: Ajax调用数据库中的数据成功,但是没有渲染到页面 出现的问题如图所示 function loadBookList() { // 1.调用后台的接口 获取后台的数据 $.get('...
  • ajax 请求数据的两种方法

    千次阅读 2015-08-15 17:48:58
    实现ajax 异步访问网络的方法有两个。第一个是原始的方法,第二个是利用jquery包的 原始的方法不用引入jquery包,只需在html中编写script 片段 这里我演示的是一个传递参数查询的例子; varurl="expert_...
  • jQuery+ajax请求数据,渲染到前端界面

    千次阅读 2020-05-11 18:39:17
    作为一个前端开发,在日常工作中,会不断的请求接口,调用接口,再对接口的数据进行一定的处理,渲染在前端界面,尤其是在今天前后端分离的时代,这项技能是每个前端开发必备~ 这里就简单的记录工作之中遇到的一些...
  • AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。 AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。 二、例子 (1)将下面的请求到的数组渲染到页面...
  • 来,案例之前,容我分享一下js如何发送请求。 原生js发送请求: let xhr= new XMLHttpRequest(); // methods:GET/POST请求方式等,url:请求地址,true异步(可为false同步) xhr.open("methods","url" ,true)...
  • springboot ajax请求数据

    千次阅读 2017-11-20 17:51:28
    springboot ajax请求数据
  • 一个简单的ajax请求数据

    万次阅读 2017-04-17 15:17:21
    jquery提交表单 用户名 密码 性别man woman 使用ajax提交表单数据 before.. $(document).ready(function(){ $("a").click(function(){ $.ajax({ type:'post
  • $.ajax({url:"http://cloud..com/",//ajax请求地址修改成自己的cache:false,//(默认:true,dataType为script和jsonp时默认为false)设置为false将不缓存此页面,建议使用默认type:"GET",//请求方式"POST"或"GET",默认...
  • ajax请求在controller中打断点,发现一切正常,也会正常返回,但是,在success中却收不到数据,再加上error返回,发现返回数据在error中。 这是由于ajax请求中的返回参数类型和实际返回的不一致造成的。 $.ajax({...
  • Vue使用ajax(axios)请求后台数据

    千次阅读 2022-03-17 12:14:53
    vue本身它是不支持直接发送ajax请求的,需要用到axios(一个基于promise的HTTP库,可以用在浏览器和node.js中)这是Axios文档的介绍,详细可查看:使用说明 · Axios 中文说明 · 看云 Axios安装 前台部分 1、...
  • 有日子没有写博客了,...那么,今天就说一个关于JQ在ajax数据到来之前添加一个加载动画的操作吧。 一、首先,接口什么的就不多介绍了。这里有一个重要的步骤,接口的请求是否异步的问题,我的接口都是同步加载的...
  • layui发送ajax请求

    千次阅读 2021-07-25 19:16:36
    $.ajax({ url:"xxxxx", data:{'xxx':xxx,'xx':xxx}, type:"post", dataType:"json", headers : {'Content-Type' : 'application/json;charset=utf-8'}, //接口json格式 success:function(data){ console.log(data);...
  • ajax 请求数据:数据文件内容用的一定是双引号(“”),不能单引号 不然会请求失败
  • 如何return返回ajax请求完成后的数据

    千次阅读 2021-08-06 04:18:46
    异步请使用Promisefunction getNewDate(flyNum){return new Promise(function(resolve,reject){$.ajax({url: '',type: 'GET',dataType: 'json',async: true,data:{param1: flyNum},}).done(function(res){var ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 340,497
精华内容 136,198
关键字:

ajax请求数据

友情链接: python实现SOM算法.zip