h2. 简介
使用jQuery将使Ajax变得及其简单。jQuery提供有一些函数,可以使简单的工作变得更加简单,复杂的工作变得不再复杂。jQuery中给出了多种Ajax方法,在此一一进行详解。
本教程的学习是从简单到复杂的进行详解,示例所用的参数都是以JSON为对象进行传递。
h2. load( url, [data], [callback] )
载入远程HTML文件并插入到DOM中。
参数:
url (String) : 请求的HTML页的URL地址。
data (Map) : (可选参数) 发送至服务器的 key/value 数据。
callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。
{code}
//不带参数
function callAjax(value) {
$("#test").load("load.html");
}
//带参数
function callAjax(value) {
$("#test").load("load.html", {name:value, isAjax: Math.random()}, function(responseText, textStatus, XMLHttpRequest){
alert("load success");
//alert(responseText);//请求返回的内容
//alert(textStatus);//请求状态:success,error
//alert(XMLHttpRequest);//XMLHttpRequest对象
//isAjax这个参数是为了防止call ajax时重复提交,在以后的例子不再重复
});
}
该方法)。
type (String) : (可选)客户端请求的类型(JSON,XML,等等)
{code}
//ajax.html
function callAjax(value) {
$.post("ajax.jsp", {name:value}, function(data, textStatus) {
if (data.result == "success") {
alert("call success");
}
}, "json");
}
{code}
其实GET和POST也就是传递方式不一样,其实都是一样的。
h2. jQuery.getScript( url, [callback] )
通过 GET 方式请求载入并执行一个 JavaScript 文件。
参数
url (String) : 待载入 JS 文件地址。
callback (Function) : (可选) 成功载入后回调函数。
{code}
function callAjax(value) {
$.getScript("ajax.js", function() {
alert("ajax.js加载完毕")
})
}
函数。注意:即使是请求失败的情况下,依然会执行此方法
{code}
$.getJSON("ajax.jsp", {name: value}, function(data) {
if (data.result == "success") {
alert("call success");
}
$("#test").ajaxComplete(function(event, request, responseText) {
alert(request.responseText);
});
});
{code}
ajaxError: AJAX 请求发生错误时执行函数。
{code}
//当请求失败时,开始执行此方法
$("#test").ajaxError(function(event, request, responseText) {
alert(responseText.url)
});
$.ajax({
url: "ajax.jsp1", //此处URL错误,必然会请求失败
timeout: 1000,
data: {name: value, isAjax: Math.random()},
success: function(o) {
if (o.result == "success") {
alert("Ajax call success.");
}
}
{code}
ajaxSend: AJAX 请求发送前执行函数。注意:ajaxSend方法必须放在ajax请求之前,不然无法执行。
{code}
$("#test").ajaxSend(function(event, request, responseText) {
alert(responseText.url)
});
$.getJSON("ajax.jsp", {name: value}, function(data) {
if (data.result == "success") {
alert("call success");
}
});
{code}
ajaxStart:AJAX 请求开始时执行函数。注意:这个方法也需要放在ajax请求之前,并且此方法是无法得到请求中的参数的。
{code}
$("#test").ajaxStart(function() {
alert("call ajax start!")
});
$.getJSON("ajax.jsp", {name: value}, function(data) {
if (data.result == "success") {
alert("call success");
}
});
{code}
ajaxStop: AJAX 请求结束时执行函数。注意:此方法同样无法得到请求中的参数,并且请在使用此方法时请注意,ajax请求了多少次,此方法也会执行多少次。
{code}
$("#test").ajaxStop(function() {
alert("call ajax end!") //如果ajax方法执行一次,则alert一次,如果再次执行,则会alert二次,依次往后推...刷新页面后将会重置。
});
$.getJSON("ajax.jsp", {name: value}, function(data) {
if (data.result == "success") {
alert("call success");
}
});
{code}
ajaxSuccess: AJAX 请求成功时执行函数。
{code}
$("#test").ajaxSuccess(function(event, request, responseText) {
alert(responseText.url)
});
$.getJSON("ajax.jsp", {name: value}, function(data) {
if (data.result == "success") {
alert("call success");
}
});
{code}
h2. 其它
jQuery.ajaxSetup(options): 设置全局 AJAX 默认选项。在设置完之后,其后的ajax请求就不再设置任何选项参数。
{code}
$.ajaxSetup({
url: "ajax.jsp"
})
$.ajax({
data: {name:value},
success: function() {
alert("call success")
}
});
{code}
serialize(): 序列表表格内容为字符串。使用ajax时,常常需要拼装input数据为'name=abc&sex=1'这种形式,用JQuery的serialize方法可以轻松的完成这个工作。如:
注意:当表单中value出现空格时,空格会被替换成加号。
{code}
$(document).ready(fu
nction() {
var formValue = $("#form1").serialize();
alert(formValue)
});