之前我么请求数据的时候都是将整个页面都刷新了一次,也就是每次都会重新请求所有的资源,但是在很多时候不需要页面全部刷新,仅仅是将需要的局部数据刷新就可以了,此时就需要发送异步请求来实现局部数据刷新的请求,异步请求Ajax(Asynchronousjavascript And XML),之前一般使用js发送异步请求,请求数据一般是XML,但是现在json出现之后就不使用xml作为数据传输格式的标准了。
今天使用jQuery发送异步请求,jq中的异步请求发送了很多方式,分析常见的方式:
html代码
导入js
html代码
取得一个雇员信息
js代码
$(function() {
//为超链接绑定事件,点击之后会发送请求
$(“a”).click(function(){
//发送请求
$.get(
“emp/get”,
{“id”:7788},
function(data){
alert(“服务器端返回数据是:”+data);
},
“json”)
})
})
方式二:
html代码同上
js代码:
$.getJSON(
“emp/get”,
{“id”:7788},
function(data){
alert(“服务器端返回数据是:”+data);
}
)
})
})
方式三:
HTML代码同上
js代码:
$(function() {
//为超链接绑定事件,点击之后会发送请求
$(“a”).click(function(){
//发送请求
$.post(
“emp/get”,
{“id”:7788},
function(data){
alert(“服务器端返回数据是:”+data);
}
)
})
})
方式四:
html代码同上:
js代码:
$(function() {
//为超链接绑定事件,点击之后会发送请求
var emp;
$(“a”).click(function(){
//发送请求
$.ajax({
type:“post”,
url:“emp/get”,
data:“id=7788”,
datatype:“josn”,
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);
})
})