一、异步请求

在之前我们请求数据的时候都是整个页面全部刷新了一次,也就是每次请求都会重新请求所有的资源。但是在很多时候不需要页面全部刷新,仅仅是需要页面的局部数据刷新即可,此时需要发送异步请求来实现这种局部数据刷新的要求,异步请求简称 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. SQL入门(1): 创建/查询/更新/连接/视图/SSMS简介

    本文介绍SQL的基本查询语句 (1) select... from  * 表示全部, 选择的东西还可以进行简单的运算, 可以列别名 select * from student; -sage from ...

  2. MySql在Mac上的安装与配置详解

    Mac下安装mysql5.7 完整步骤(图文详解) 转载---原文地址:https://www.jb51.net/article/103841.htm 本篇文章主要介绍了Mac下安装mysql5.7 ...

  3. 将日志备份推送到s3存储上

    1.将日志备份推送到s3存储上 #!/bin/sh # 此脚本实现将/usr/local/netqin/boss/netqin/logs/BOSS_ContentServer/BOSS_AD_SDK ...

  4. 使用AltSearch格式化Kindle读书笔记

    AltSearch是LibreOffice Writer的一个用于自动化执行复杂文本替换操作的扩展,能够在不需要复杂编程的条件下进行一些文档格式的手动与批量转换和调整.该扩展除了支持普通文本与正则表达 ...

  5. docker /var/lib/docker/aufs/mnt 目录满了，全是垃圾数据

    #!/bin/sh echo "==================== start clean docker containers logs ======================= ...

  6. thread - 传递引用参数

    当给 thread 的执行函数传递指针参数时,没有任何问题,但是如果想传递引用,按照普通函数的调用方法会遇到编译失败: #include <iostream> #include <t ...

  7. MQTT服务器的搭建（Windows平台）

    人工智能.智能家居越来越火,在服务器和多个终端进行通信的过程中使用传统的请求/回答(Request/Response)模式已经过时,伴随而来的是发布/订阅(Publish/Subscribe)模式-- ...

  8. UOJ#110. 【APIO2015】Bali Sculptures 贪心 动态规划

    原文链接https://www.cnblogs.com/zhouzhendong/p/UOJ110.html 题解 我们发现n=2000 的子任务保证A=1! 分两种情况讨论: $n\leq 100$ ...

  9. Redis自学笔记:4.4进阶-消息通知

    4.4消息通知 4.4.1任务队列 传递任务的队列.与任务队列进行交互的实体有两类,一类是生产者,一类是消费者. 生产者将需要处理的任务放入任务队列中,二消费者不断从任务队列中读入任务 信息并执行. ...

  10. org.hibernate.exception.SQLGrammarException: could not extract ResultSet &&&&&Incorrect syntax near '@P0'.

    这个故障的原因比较多: 1.如数据库中的字段和类中的字段类型不一致: 2.数据库dialect不够具体 myeclispe自动生成的是  org.hibernate.dialect.SQLServer ...