一、异步请求
在之前我们请求数据的时候都是整个页面全部刷新了一次,也就是每次请求都会重新请求所有的资源。但是在很多时候不需要页面全部刷新,仅仅是需要页面的局部数据刷新即可,此时需要发送异步请求来实现这种局部数据刷新的要求,异步请求简称 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);
}）
}）