一、异步请求
在之前我们请求数据的时候都是整个页面全部刷新了一次,也就是每次请求都会重新请求所有的资源。但是在很多时候不需要页面全部刷新,仅仅是需要页面的局部数据刷新即可,此时需要发送异步请求来实现这种局部数据刷新的要求,异步请求简称 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数据
原文地址：https://www.cnblogs.com/whymoney1000/p/10792454.html