不刷新整个页面便可与服务器通信的方法有很多,比如Flash,Java applet,iframe等,但Ajax是目前最为常见的一种。
jquery 对 ajax的请求进行了封装,常用的四种 ajax 请求的函数分别为:$.ajax(),$.get() ,$.post(),$.getJSON()
效果:页面加载完成时,自动发起ajax请求,从后台获取数据,并显示在页面表格中。
1、$.ajax():返回其创建的 XMLHttpRequest 对象。
语法:$.ajax(url,[settings]); 可选字段: 1)url:链接地址,字符串表示 2)data:需发送到服务器的数据,GET与POST都可以,格式为{A: '...', B: '...'} 3)type:"POST" 或 "GET",请求类型 4)dataType:服务器响应的数据类型,字符串表示;当填写为json时,回调函数中无需再对数据反序列化为json 5)success:请求成功后,服务器回调的函数 6)error:请求失败后,服务器回调的函数 7)complete:请求完成后调用的函数,无论请求是成功还是失败,都会调用该函数;如果设置了success与error函数,则该函数在它们之后被调用 8)async:是否异步处理,bool表示,默认为true;设置该值为false后,JS不会向下执行,而是原地等待服务器返回数据,并完成相应的回调函数后,再向下执行 |
代码实例:
保存数据到服务器,成功时显示信息:
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
2. $.get():该方法使用GET方式执行Ajax请求,从服务器加载数据。
语法:$.get(url,[data],[callback],[type]); 参数注解: url:待载入页面的URL地址 data:待发送 Key/value 参数 callback:载入成功时回调函数。 type:返回内容格式,xml, html, script, json, text, _default。 |
3. $.post():该方法使用POST方式执行Ajax请求,从服务器加载数据。
语法:$.post(url,[data],[callback],[type]); url:发送请求地址。 data:待发送 Key/value 参数。 callback:发送成功时回调函数。 type:返回内容格式,xml, html, script, json, text, _default。 |
实例代码:
获得 test.php 页面返回的 json 格式的内容:
$.post("test.php", { "func": "getNameAndTime" },
function(data){
alert(data.name); // John
console.log(data.time); // 2pm
}, "json");
4. $.getJSON():该方法使用GET方式执行Ajax请求,从服务器加载JSON格式数据。
语法:$.getJSON(url,[data],[callback]); url:发送请求地址。 data:待发送 Key/value 参数。 callback:载入成功时回调函数。 |
因为确定服务器返回json编码的数据,故相较于$.get()不必再指定dataType。
代码实例:
从 test.js 载入 JSON 数据,附加参数,显示 JSON 数据中一个 name 字段数据。
$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){
alert("JSON Data: " + json.users[3].name);
});