一、异步请求

在之前我们请求数据的时候都是整个页面全部刷新了一次,也就是每次请求都会重新请求所有的资源。但是在很多时候不需要页面全部刷新,仅仅是需要页面的局部数据刷新即可,此时需要发送异步请求来实现这种局部数据刷新的要求,异步请求简称 Ajax(Asynchronous Javascript And XML),在之前一般使用js 发送异步请求,请求的数据一般是xml,但是现在 json 出现之后就不使用xml 做为数据传输格式标准了。使用jQuery 发送异步请求,jq中的异步请求发送有很多方式，常见的方式如下:

1、方式一

$.get( //发送一个get 请求

   "test.cgi",//请求的地址

   {name: "John", time:"2pm" }, //传递服务端的数据

　　function(data){ //回调函数,当请求成功之后,会自动调用该函数,data 服务端返回给客户端数据

　　alert("Data Loaded: " + data);
　　},

"json"); //表示请求的数据格式是json格式

<script type="text/javascript" src="js/jquery.min.js"></script>

<Script type="text/javascript" src="js/login.js"></script>

</head>

<body>

<a href="javascript:void(0)">取得一个雇员信息</a>

$(function(){

　　// 为超链接绑定事件,点击之后会发送请求

　　$("a").click(function(){
　　//发送请求

　　$.get(

　　"emp/get",

　　{"id":7788}, function(data){

　　lalert("服务器端返回的数据是:"+data);
　　},

"json")
  })
})

2、方式二

$.getJSON(//发送一个get 请求,但是只接受 json 格式的响应数据

　　"test.js",

　　{ name: "John" time: "2pm" }

　　function (json) {

　　　　alert("JSON Data:" + json.users [3].name);

})
$(function(){

　　// 为超链接绑定事件,点击之后会发送请求

　　$("a").click(function(){

　　// 发送请求

　　$.getJSON(

　　　　"emp/get",

　　　　{"id":7788},

　　　　function(data){

　　　　　　alert("服务器端返回的数据是:"+data);

 　　　　})
　　})
})

使用getJSON 方式,默认取得数据就是json数据,不需要明确指定出来。 如果客户端指定了要取得 json 数据则服务器端必须返回的值也是json格式的字符串数据。

4、方式三

$.ajax({

    //发送一个请求

    type:"POST", //指定请求类型

    url:"some.php", //请求地址

    data: "name=John&location=Boston", //传递的数据

    dataType:"json", //指定接收的数据类型(需要服务器端传递的数据类型)

    async: false, // 实现在请求没有完全处理之前锁定浏览器,不做后面的操作

    Success: function(msg){ //回调函数

    alert ( "Data Saved: " + msg );

    // 其他代码

});
$(function() {

    // 为超链接绑定事件,点击之后会发送请求

    var emp;

    $("a").click(function(){

    //发送请求

        $.ajax({

            type:"post",

            url:"emp/get",

            data:"id=7788",

            dataType:"json",

            success:function(data){

            emp=data;

        })

    alert(emp.ename);

    })

})

此时出现了emp 没有 ename 属性,原因是先执行了“alert(emp.ename)”代码请求才处理完毕,应该要求先把请求处理完毕之后再访问 emp.ename 才可以实现正确的操作,那么应该让请求同步(现在是异步的)

指定请求同步

$(function(){

    //为超链接绑定事件,点击之后会发送请求

    var emp;

    $("a").click(function(){

    // 发送请求

        $.ajax({

            type:"post", url:"emp/get",

            data:"id=7788",

            dataType:"json",

            async:false, //锁定浏览器,只有请求处理完毕之后(回调函数调用完毕之后)才能执行后面的代码

            success: function(data) {

                emp=data;}

            })

    alert(emp.ename);

    }）

}）

异步请求取得json数据的更多相关文章

  1. 【Spring学习笔记-MVC-5】利用spring MVC框架，实现ajax异步请求以及json数据的返回

    作者:ssslinppp      时间:2015年5月26日 15:32:51 1. 摘要 本文讲解如何利用spring MVC框架,实现ajax异步请求以及json数据的返回. Spring MV ...

  2. 异步请求获取JSON数据

    json格式的数据广泛应用于异步请求中前后端的数据交互,本文主要介绍几种使用场景和使用方法. <script type="text/javascript"> funct ...

  3. 自己构造用于异步请求的JSON数据

    有时候.serialize()或者.serializeJSON()莫名其妙的不能按照我们的要求将数据序列化. 或者其他什么问题然我们需要自己惊醒JSON数据的构造.因为js对JSON的支持做的比较好, ...

  4. PHP/Post 提交请求获取json数据，并转化为所需要的数组

    /** * Post 提交请求获取json数据,并转化为所需要的数组 */ function request_post($url = '', $param = '') { if (empty($url ...

  5. 在使用Ajax请求返回json数据的时候IE浏览器弹出下载保存对话框的解决方法

    在使用Ajax请求返回json数据的时候IE浏览器弹出下载保存对话框的解决方法 最近在做一个小东西,使用kindeditor上传图片的时候,自己写了一个上传的方法,按照协议规则通过ajax返回json ...

  6. 【VueJS】VueJS开发请求本地json数据的配置

    VueJS开发请求本地json数据的配置,旧版本是build/dev-server.js,新版本是build/webpack.dev.conf.js. VueJS开发请求本地json数据的配置,早期的 ...

  7. shiro异步请求返回JSON响应

    shiro异步请求返回JSON响应 需求1:当shiro请求资源,但是没有进行认证时,默认是进行重定向,现在需要返回JSON响应.注意异步请求,服务器重定向后,ajax拿到的是浏览器重定向后的到的页面 ...

  8. Nginx下HTML页面POST请求静态JSON数据返回405状态

    在浏览器访问HTML页面,发现一些静态JSON数据没有显示,F12查看,如下图所示: 可以看到请求方式为POST 将请求链接复制在浏览器地址栏访问,可以正常请求到数据 F12查看,可以看到请求方式为G ...

  9. Beego框架POST请求接收JSON数据

    原文: https://blog.csdn.net/Aaron_80726/article/details/83870563 ------------------------------------- ...

随机推荐

  1. lnoi2019游记

    好诡异的省选...... day0: 莫名其妙的订了下午从sy到dl的火车,得五点多才能到,所以.......是不需要试机的吗...... 好吧... 看着停课的jflr们,感觉他们好强啊,像我这种酱 ...

  2. AI数据分析(一)

    安装Spyder+PyQt5 在python36目录下,使用cmd打开,切换到Scripts文件下 pip install spyder pip install PyQt5 python中的库 Num ...

  3. Windows Internals 笔记——作业

    1.Windows提供了一个作业内核对象,它允许我们将进程组合在一起并创建一个“沙箱”来限制进程能够做什么.创建只包含一个进程的作业同样非常有用,因为这样可以对进程施加平时不能施加的限制. 2.如果进 ...

  4. docker报错：Failed to restart docker.service: Unit not found.

    前言:我之前安装好docker了,但是关机重启后,发现docker就没了 报错:Failed to restart docker.service: Unit not found.   解决方法: 1. ...

  5. （四）Knockout 表单

    click <div> You've clicked <span data-bind="text: numberOfClicks"></span> ...

  6. Punycode

    Punycode是一个根据RFC 3492标准而制定的编码系统,主要用于把域名从地方语言所采用的Unicode编码转换成为可用于DNS系统的编码 “中文域名”不被标准的解析服务器支持,需转化为Puny ...

  7. SQL反模式学习笔记18 减少SQL查询数据，避免使用一条SQL语句解决复杂问题

    目标:减少SQL查询数据,避免使用一条SQL语句解决复杂问题 反模式:视图使用一步操作,单个SQL语句解决复杂问题 使用一个查询来获得所有结果的最常见后果就是产生了一个笛卡尔积.导致查询性能降低. 如 ...

  8. sql多字段相减///单字段多值

    SELECT IFNULL(t.预算金额,)-IFNULL(t.实使用金额,)-IFNULL(SUM(f.已审核.待审核总数),)remainingMoney FROM 表名 t LEFT JOIN ...

  9. 全文搜索引擎——Solr

    1.部署solr a.下载并解压Solr b.导入项目(独立项目): 将解压后的 server\solr-webapp 下的 webapp文件夹 拷贝到tomcat的webapps下,并重命名为 so ...

  10. 大数据小白系列 —— MapReduce流程的深入说明

    上一期我们介绍了MR的基本流程与概念,本期稍微深入了解一下这个流程,尤其是比较重要但相对较少被提及的Shuffling过程. Mapping 上期我们说过,每一个mapper进程接收并处理一块数据,这 ...