jQuery学习笔记8 Ajax 1.Ajax请求 jQuery.ajax(url,[settings]) 通过HTTP请求加载远程数据。

参数介绍：

url:一个用来包含发送请求的URL字符串。

settings:AJAX 请求设置。所有选项都是可选的。

$.ajax()返回创建的XMLHttpRequest对象。

回调函数

如果要处理$.ajax()得到的数据，则需要使用回调函数。beforeSend、error、dataFilter、success、complete。

beforeSend 在发送请求之前调用，并且传入一个XMLHttpRequest作为参数。 error 在请求出错时调用。传入XMLHttpRequest对象，描述错误类型的字符串以及一个异常对象（如果有的话） dataFilter 在请求成功之后调用。传入返回的数据以及”dataType”参数的值。并且必须返回新的数据（可能是处理过的）传递给success回调函数。 success 当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。 complete 当请求完成之后调用这个函数，无论成功或失败。传入XMLHttpRequest对象，以及一个包含成功或错误代码的字符串。

示例：

加载并执行一个 JS 文件。

jQuery 代码: $.ajax({ type: "GET", url: "test.js", dataType: "script" });

load(url,[data],[callback]) 载入远程HTML文件代码并插入至DOM中

url:待装入 HTML 网页网址。

data:发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。

callback:载入成功时回调函数。

示例:

加载文章侧边栏导航部分至一个无序列表。

HTML 代码: <b>jQuery Links:</b> <ul></ul> jQuery 代码: $("#links").load("/Main_Page #p-Getting-Started li");

jQuery.get(url,[data],[callback],[type])通过远程HTTP GET请求载入信息。这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 \$.ajax。

url:待载入页面的URL地址。

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

type:返回内容格式，xml, html, script, json, text, _default。

示例：

请求 test.php 网页，传送2个参数，忽略返回值。

jQuery 代码: $.get("test.php", { name: "John", time: "2pm" } );

jQuery.getJSON(url,[data],[callback]) 通过HTTP GET请求载入JSON数据

url:发送请求地址。

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

jQuery.getScript(url,[callback]) 通过HTTP GET请求载入并执行一个JavaScript文件。

jQuery.post(url,[data],[callback],[type]) 通过远程HTTP POST请求载入信息。这是一个简单的 POST 请求功能以取代复杂$.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

url:发送请求地址。

data:待发送 Key/value 参数。

callback:发送成功时回调函数。

type:返回内容格式，xml, html, script, json, text, _default。

示例：

请求 test.php 页面，并一起发送一些额外的数据（同时仍然忽略返回值）：

jQuery 代码: $.post("test.php", { name: "John", time: "2pm" } );

向服务器传递数据数组（同时仍然忽略返回值）：

jQuery 代码: $.post("test.php", { 'choices[]': ["Jon", "Susan"] });

使用 Ajax 请求发送表单数据：

jQuery 代码: $.post("test.php", $("#testform").serialize()); 2.Ajax事件

ajaxComplete(callback) AJAX请求完成时执行函数。

示例

Ajax请求完成时执行函数。

jQuery代码：

$("#msg").ajaxComplete(function(event,request, settings){ $(this).append("<li>请求完成.</li>"); });

ajaxSend(callback) Ajax请求发送前执行函数。

示例

AJAX 请求发送前显示信息。

jQuery代码：

$("#msg").ajaxSend(function(evt, request, settings){ $(this).append("<li>开始请求: " + settings.url + "</li>"); });

ajaxError(callback) Ajax请求发生错误时执行函数。

示例

AJAX 请求失败时显示信息。

jQuery代码：

$("#msg").ajaxError(function(event,request, settings){ $(this).append("<li>出错页面:" + settings.url + "</li>"); });

ajaxStart(callback) Ajax请求开始时执行函数。

示例

AJAX 请求开始时显示信息。

jQuery代码：

$("#loading").ajaxStart(function(){ $(this).show(); });

ajaxStop(callback) Ajax请求结束时执行函数。

示例

AJAX 请求结束后隐藏信息。

jQuery代码：

$("#loading").ajaxStop(function(){ $(this).hide(); });

ajaxSuccess(callback) Ajax请求成功时执行函数。

示例

AJAX 请求成功后显示信息。

jQuery代码：

$("#msg").ajaxSuccess(function(evt, request, settings){ $(this).append("<li>请求成功!</li>"); }); 3.其他

jQuery.ajaxPrefilter( [dataTypes] , handler(options, originalOptions, jqXHR) )

jQuery.ajaxSetup([options]) 设置全局AJAX默认选项。

设置 AJAX 请求默认地址为 “/xmlhttp/”，禁止触发全局 AJAX 事件，用 POST 代替默认 GET 方法。其后的 AJAX 请求不再设置任何选项参数。 jQuery 代码: $.ajaxSetup({ url: "/xmlhttp/", global: false, type: "POST" }); $.ajax({ data: myData });

serialize() 序列化表格内容为字符串。用于Ajax请求。

##### HTML 代码: <p><b>Results: </b> </p> <form> <select> <option>Single</option> <option>Single2</option> </select> <select multiple="multiple"> <option selected="selected">Multiple</option> <option>Multiple2</option> <option selected="selected">Multiple3</option> </select><br/> <input type="checkbox" value="check1"/> check1 <input type="checkbox" value="check2" checked="checked"/> check2 <input type="radio" value="radio1" checked="checked"/> radio1 <input type="radio" value="radio2"/> radio2 </form> jQuery 代码: $("#results").append( "<tt>" + $("form").serialize() + "</tt>" );

serializeArray() 序列化表格元素(类似.serialize()方法)返回JSON数据

注意，此方法返回的是JSON对象而非JSON字符串。需要使用插件或者第三方库进行字符串化操作。