一、异步请求

在之前我们请求数据的时候都是整个页面全部刷新了一次,也就是每次请求都会重新请求所有的资源。但是在很多时候不需要页面全部刷新,仅仅是需要页面的局部数据刷新即可,此时需要发送异步请求来实现这种局部数据刷新的要求,异步请求简称 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. DOS批处理高级教程（还不错）（转）

    前言 目录 第二节 常用特殊符号     1.@  命令行回显屏蔽符     2.%  批处理变量引导符     3.>   输出重定向符     4.>>  输出重定向符     ...

  2. 著名的3像素Bug（div+img，多出几像素）

    <div><img src="...."></div> 给img的css设置display: block;/*用来去除div下边莫名多出来的3p ...

  3. EF的使用<三>

    ExecuteSqlCommand与SqlQuery 在数据上下文DBModel的实例中有个Database属性,其中有两组方法.ExecuteSqlCommand()和.SqlQuery().它们都 ...

  4. MSB4064 错误

    把项目从vs2008转成vs 2012 后,受用msbuild 编译出错 错误Code:MSB4064 修改 把msbuild 的路径从 %windir%\Microsoft.NET\Framewor ...

  5. 关于getchar-scanf函数的相关坑！

    首先,我们编写如下所示的代码: #include <stdio.h> void test(int n) { ; ; ; a = b; b = c; c = n; printf(" ...

  6. 网页布局之grid

    学习网格布局时,你可能会在网络上看到很多文章,内容不同,属性不同,真是让人摸不着头脑,到底哪个才是正确的?看了本篇文章,我想你会豁然开朗.比如,一会儿用grid-rows,一会儿用grid-defin ...

  7. NEO GUI 多方签名使用

    众所周至,NEOGUI是一个开发者演示用钱包,使用体验是非常的不友好的. 今天本来打算使用多方签名账户,发现和想象的不一样,请教了小伙伴也不行.遂调试了一下原因,发现踩进坑里了.     把这个问题记 ...

  8. weblogic10.3 启动报错 Unrecognized option: -jrockit Error: Could not create the Java Virtual Machine

    今天在使用weblogic10.3+jdk7创建domain的时候,建好domain后启动报如下错误信息: Unrecognized option: -jrockitError: Could not ...

  9. oldboy es和logstash

    logstash: input:https://www.elastic.co/guide/en/logstash/current/input-plugins.html input { file { p ...

  10. chrome 安装setupvpn 解决chorme未能成功加载扩展程序的问题

    一: vpn文件    https://pan.baidu.com/s/1wZV2HAC3GHlh1bjlvbilRg 提取码:  gz72; 二 : 安装步骤 ------请看完以下步骤,不要直接拖 ...