jQuery学习笔记之Ajax用法详解

这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求、载入、处理、传递等,需要的朋友可以参考下

本文实例讲述了jQuery学习笔记之Ajax用法。分享给大家供大家参考，具体如下：

原文链接：https://yq.aliyun.com/ziliao/153370

一、Ajax请求

　　1、jQuery.ajax(options)

　　　　通过 HTTP 请求加载远程数据。jQuery 底层 AJAX 实现。简单易用的高层实现见 .get,.post 等。

　　　　.ajax()返回其创建的XMLHttpRequest对象。大多数情况下你无需直接操作该对象，但特殊情况下可用于手动终止请求。.ajax() 只有一个参数：参数 key/value 对象，包含各配置及回调函数信息。详细参数选项见下。

　　　　注意：  如果你指定了 dataType 选项，请确保服务器返回正确的 MIME 信息，(如 xml 返回 "text/xml")。错误的 MIME 类型可能导致不可预知的错误。

　　　　注意：如果dataType设置为"script"，那么在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)

　　　　jQuery 1.2 中，您可以跨域加载 JSON 数据，使用时需将数据类型设置为 JSONP。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。数据类型设置为 "jsonp" 时，jQuery 将自动调用回调函数。

　　　　返回值： XMLHttpRequest

　　　　参数：

　　　　options (可选) : AJAX 请求设置。所有选项都是可选的。

　　　　选项

　　　 （1）、 async (Boolean)  : (默认: true) 

　　　　　　默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

　　　 （2）、 beforeSend (Function)  : 发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。

　　　　　　XMLHttpRequest 对象是唯一的参数。这是一个 Ajax 事件。如果返回false可以取消本次ajax请求。

　　　　　function (XMLHttpRequest) {
 　　　　　　 this; // 调用本次AJAX请求时传递的options参数
　　　　　}

　　　 （3）、 cache (Boolean)  : (默认: true,dataType为script时默认为false) 。jQuery 1.2 新功能，设置为 false 将不会从浏览器缓存中加载请求信息。

　　　 （4）、 complete (Function)  : 请求完成后回调函数 (请求成功或失败时均调用)。

　　　　　　参数： XMLHttpRequest 对象和一个描述成功请求类型的字符串。 这是一个 Ajax 事件

　　　　function (XMLHttpRequest, textStatus) {
  　　　　　　this; // 调用本次AJAX请求时传递的options参数
　　　　} 

　　　 （5）、 contentType (String)  : (默认: " application/x-www-form-urlencoded ") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。

　　　 （6）、 data (Object,String)  : 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在URL 后。查看processData选项说明以禁止此自动转换。

　　　　　　必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如  {foo:["bar1", "bar2"]}  转换为 '&foo=bar1&foo=bar2'。

　　　 （7）、 dataFilter (Function)  :给Ajax返回的原始数据的进行预处理的函数。提供data和type两个参数：data是Ajax返回的原始数据，type是调用jQuery.ajax时

　　　　　　提供的dataType参数。函数返回的值将由jQuery进一步处理。

　　　　　　function (data, type) {
  　　　　　　// 对Ajax返回的原始数据进行预处理
  　　　　　　return data // 返回处理后的数据
　　　　　　} 

　　　 （8）、 dataType (String)  : (默认值：智能判断xml或者html)

　　　　　　　　预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息返回responseXML 或 responseText，并作为回调函数参数传递，可用值：

　　　　　　　　"xml": 返回 XML 文档，可用 jQuery 处理。
　　　　　　　　"html": 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。
　　　　　　　　"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。注意：在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)
　　　　　　　　"json": 返回 JSON 数据 。
　　　　　　　　"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 " myurl?callback=? " jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
　　　　　　　　"text": 返回纯文本字符串

　　　 （9）、 error (Function)  : (默认: 自动判断 (xml 或 html)) 请求失败时调用时间。参数有以下三个：XMLHttpRequest 对象、错误信息、（可选）捕获的错误对象。

　　　　　　如果发生了错误，错误信息（第二个参数）除了得到null之外，还可能是"timeout", "error", "notmodified" 和 "parsererror"。Ajax 事件。

　　　　　　function (XMLHttpRequest, textStatus, errorThrown) {
　　　　　　　　// 通常 textStatus 和 errorThrown 之中
　　　　　　　　// 只有一个会包含信息
　　　　　　　　this; // 调用本次AJAX请求时传递的options参数
　　　　　　}

　　　 （10）、 global (Boolean)  : (默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。

　　　 （11）、 ifModified (Boolean)  : (默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。　　

　　　 （12）、 jsonp (String)  : 在一个jsonp请求中重写回调函数的名字。这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，

　　　　　　　　比如 {jsonp:'onJsonPLoad'} 会导致将"onJsonPLoad=?"传给服务器。

　　　 （13）、 password (String)  : 用于响应HTTP访问认证请求的密码

　　　 （14）、 processData (Boolean)  : (默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型

　　　　　　　　" application/x-www-form-urlencoded "。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。

　　　 （15）、 scriptCharset (String)  : 只有当请求时dataType为"jsonp"或"script"，并且type是"GET"才会用于强制修改charset。通常在本地和远程的内容编码不同时使用。

　　　 （16）、 success (Function)  : 请求成功后的回调函数。参数：由服务器返回，并根据dataType参数进行处理后的数据；描述状态的字符串。 Ajax 事件。

　　　　　　function (data, textStatus) {
  　　　　　　// data 可能是 xmlDoc, jsonObj, html, text, 等等
  　　　　　　this; // 调用本次AJAX请求时传递的options参数
　　　　　　}

　　　 （17）、 timeout (Number) : 设置请求超时时间（毫秒）。此设置将覆盖全局设置。

　　　 （18）、 type (String)  : (默认: "GET") 请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器

　　　　　　　　支持。

　　　 （19）、 url (String)  : (默认: 当前页地址) 发送请求的地址。

　　　 （20）、 username (String)  : 用于响应HTTP访问认证请求的用户名

　　　 （21）、 xhr (Function)  : 需要返回一个XMLHttpRequest 对象。默认在IE下是ActiveXObject 而其他情况下是XMLHttpRequest 。用于重写或者提供一个增强的

　　　　　　　　XMLHttpRequest 对象。这个参数在jQuery 1.3以前不可用。

　　　  ps:上述的部分是 url  type  dataType  data  success 调用常用的参数设置，利用这几个参数就可以成功实现ajax调用了.

　　　　示例

 1 //jQTest.js
 2 function jqAjaxTest() {
 3   var jqRequestUrl = "AjaxHandler.ashx";
 4   //1、 加载并执行一个 JS 文件
 5   $.ajax({
 6     type: "GET",
 7     url: "js/jqLoadJs.js",
 8     dataType: "script"
 9   });
10   //2、装载一个 HTML 网页最新版本 
11   $.ajax({
12     url: "test.htm",
13     cache: false, //没有缓存的说
14     success: function(html) {
15       //alert(html);
16       $("#spanGetHtml").css("display", "block");
17       $("#spanGetHtml").css("color", "red");
18       $("#spanGetHtml").append(html);
19     }
20   });
21   //3、获取并解析一个xml文件(从服务端获取xml)
22   $.ajax({
23     type: 'GET',
24     dataType: 'xml', //这里可以不写，但千万别写text或者html
25     url: jqRequestUrl + "?action=jquerGetXmlRequest",
26     success: function(xml) {
27       //正确解析服务端的xml文件
28       $(xml).find("profile").each(function(i) {
29         var name = $(this).children("userName").text(); //取对象文本
30         var location = $(this).children("location").text();
31         alert("Xml at SERVER is gotten by CLIENT:" + name + " is living in " + location);
32       });
33     },
34     error: function(xml) {
35       alert('An error happend while loading XML document ');
36     }
37   });
38   //4、发送 XML 数据至服务器(客户端发送xml到服务端)
39   var xmlDocument = "" +
40   " jeff wong" +
41   " beijing" +
42   "";
43   $.ajax({
44     url: jqRequestUrl + "?action=jqueryXmlRequest",
45     processData: false, //设置 processData 选项为 false，防止自动转换数据格式。
46     //type: "xml",
47     cache: false,
48     type: "xml",
49     data: xmlDocument,
50     success: function(html) {
51       alert(html); //弹出提示
52       $("#spanResult").css("display", "block");
53       $("#spanResult").css("color", "red");
54       $("#spanResult").html(html); //给当前dom的一个span元素赋值
55     },
56     error: function(oXmlHttpReq, textStatus, errorThrown) {
57       alert("jquery ajax xml request failed");
58       $("#spanResult").css("display", "block");
59       $("#spanResult").css("color", "red");
60       $("#spanResult").html("jquery ajax xml request failed"); //提示出错
61     }
62   });
63   //5、同步加载数据。发送请求时锁住浏览器。需要锁定用户交互操作时使用同步方式。
64   var html = $.ajax({
65     //没有type 默认为GET方式
66     url: jqRequestUrl + "?action=syncRequest",
67     async: false
68   }).responseText;
69   alert(html);
70   //6、显式get测试
71   $.ajax({
72     type: "GET",
73     url: jqRequestUrl + "?action=jquery&userName=" + $("#txtUserName").val(),
74     cache: false,
75     success: function(html) {
76       // alert(html); //弹出提示
77       $("#spanResult").css("display", "block");
78       $("#spanResult").css("color", "red");
79       $("#spanResult").html(html); //给当前dom的一个span元素赋值
80     },
81     error: function(oXmlHttpReq, textStatus, errorThrown) {
82       alert("jquery ajax request failed");
83       $("#spanResult").css("display", "block");
84       $("#spanResult").css("color", "red");
85       $("#spanResult").html("jquery ajax request failed"); //提示出错
86     }
87   });
88   //7、显式POST测试 
89   $.ajax({
90     type: "POST",
91     url: jqRequestUrl,
92     data: "action=jquerySaveData&userName=jeffwong&location=beijing",
93     success: function(html) {
94       alert(html);
95     }
96   });
97 }

2、load(url,[data],[callback])

　　载入远程 HTML 文件代码并插入至 DOM 中。

　　默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。jQuery 1.2 中，可以指定选择符，来筛选载入的 HTML 文档，DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。

　　返回值 jQuery

　　参数

　　　　 url (String)  : 待装入 HTML 网页网址。

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

　　　　 callback (Callback)  : (可选) 载入成功时回调函数。

　　示例

1 function jqAjaxTest() {
2   $("#spanResult").load("test.htm");
3   $("#spanResult").css("display", "block");
4   $("#spanResult").css("color", "red");
5 }

3、jQuery.get(url,[data],[callback],[type])

　　通过远程 HTTP GET 请求载入信息。

　　这是一个简单的 GET 请求功能以取代复杂 .ajax。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用.ajax。

　　返回值  XMLHttpRequest

　　参数

　　　　 url (String)  : 待载入页面的URL地址

　　　　 data (Map)  : (可选) 待发送 Key/value 参数。

　　　　 callback (Function)  : (可选) 载入成功时回调函数。

　　　　 type (String)  : (可选) 返回内容格式，xml, html, script, json, text, _default。

　　示例

1 function jqAjaxTest() {
2   var jqRequestUrl = "AjaxHandler.ashx";
3   $.get(jqRequestUrl + "?action=jquery", { userName: "jeff wong", location: "beijing" }, jqGetNormalCallBack, 'text'); //返回数据类型
4 }
5 function jqGetNormalCallBack(oData) {
6   $("#spanResult").html(oData);//这里直接json数据绑定了，下一个jquery方法会有处理
7   $("#spanResult").css("display", "block");
8   $("#spanResult").css("color", "red");
9 }

　　ps：本例中，我们返回的是一段json类型的数据，在客户端没有对json类型数据进行处理，在下一个方法（jQuery.getJSON）中会改进处理的。

4、jQuery.getJSON(url,[data],[callback])

　　通过 HTTP GET 请求载入 JSON 数据。

　　在 jQuery 1.2 中，您可以通过使用JSONP 形式的回调函数来加载其他网域的JSON数据，如 "myurl?callback=?"。jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。 
　　注意：此行以后的代码将在这个回调函数执行前执行。

　　返回值  XMLHttpRequest

　　参数

　　　　 url (String)  : 发送请求地址。
　　　　 data (Map)  : (可选) 待发送 Key/value 参数。
　　　　 callback (Function)  : (可选) 载入成功时回调函数。

　　示例

 1 function jqAjaxTest() {
 2   var jqRequestUrl = "AjaxHandler.ashx";
 3   //getJSON方法调用
 4   $.getJSON(jqRequestUrl + "?action=jquery", { userName: "jeff wong", location: "beijing" }, jqGetJsonCallBack); //返回json数据类型
 5 }
 6 //对json数据进行处理 (oData是json类型的数据)
 7 function jqGetJsonCallBack(oData) {
 8   var oJsonStr = "";
 9   //取json中的数据,并呈现
10   oJsonStr += "userName:" + oData.userName + "  location:" + oData.location + "
";
11   //在div中显示所有数据
12   $("#divResult").html(oJsonStr);
13   $("#divResult").css("display", "block");
14   $("#divResult").css("color", "red");
15 }

5、jQuery.getScript(url,[callback])

　　通过 HTTP GET 请求载入并执行一个 JavaScript 文件。

　　jQuery 1.2 版本之前，getScript 只能调用同域 JS 文件。 1.2中，您可以跨域调用 JavaScript 文件。注意：Safari 2 或更早的版本不能在全局作用域中同步执行脚本。如果通过 getScript 加入脚本，请加入延时函数。

　　返回值  XMLHttpRequest

　　参数

　　　　 url (String)  : 待载入 JS 文件地址。

　　　　 callback (Function)  : (可选) 成功载入后回调函数。

　　示例

1 function jqAjaxTest() {
2   var jsUrl = "js/jqLoadJs.js";
3   //getScript方法调用
4   $.getScript(jsUrl, jqGetJsCallBack);
5 }
6 //oData返回的是整个js路径下js文件内容
7 function jqGetJsCallBack(oData) {
8   alert(oData);
9 }

6、jQuery.post(url,[data],[callback],[type])

　　通过远程 HTTP POST 请求载入信息。

　　这是一个简单的 POST 请求功能以取代复杂 .ajax。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用.ajax。

　　返回值  XMLHttpRequest

　　参数

　　　　 url (String)  : 发送请求地址。

　　　　 data (Map)  : (可选) 待发送 Key/value 参数。

　　　　 callback (Function)  : (可选) 发送成功时回调函数。

　　　　 type (String)  : (可选) 返回内容格式，xml, html, script, json, text, _default。

　　示例

 1 function jqAjaxTest() {
 2   var jqRequestUrl = "AjaxHandler.ashx";
 3   $.post(jqRequestUrl + "?action=jquery", { userName: "jeff wong", location: "beijing" }, jqPostCallBack, "text"); //返回text数据类型
 4 }
 5 function jqPostCallBack(oData) {
 6   //在div中显示所有数据
 7   $("#divResult").html(oData);
 8   $("#divResult").css("display", "block");
 9   $("#divResult").css("color", "red");
10 }

 

二、Ajax事件

　　1、ajaxComplete(callback)

　　　　AJAX 请求完成时执行函数。Ajax 事件。

　　　　XMLHttpRequest 对象和设置作为参数传递给回调函数。

　　　　返回值  jQuery

　　　　参数

　　　　 callback (Function)  : 待执行函数

　　　　示例

 1 function jqAjaxTest() {
 2   var jqRequestUrl = "AjaxHandler.ashx";
 3   $.post(jqRequestUrl + "?action=jquery", { userName: "jeff wong", location: "beijing" }, jqPostCallBack, "text"); //返回text数据类型
 4   //AJAX 请求完成时执行函数
 5   $("#divResult").ajaxComplete(function(event, request, settings) {
 6     $(this).append("
请求完成.");
 7   });
 8 }
 9 function jqPostCallBack(oData) {
10   //在div中显示所有数据
11   $("#divResult").html(oData);
12   $("#divResult").css("display", "block");
13   $("#divResult").css("color", "red");
14 }

　　2、ajaxError(callback)

　　　　AJAX 请求发生错误时执行函数。Ajax 事件。

　　　　XMLHttpRequest 对象和设置作为参数传递给回调函数。捕捉到的错误可作为最后一个参数传递。

　　　　返回值  jQuery

　　　　参数

　　　　 callback (Function)  : 待执行函数

1 function (event, XMLHttpRequest, ajaxOptions, thrownError) {
2    // thrownError 只有当异常发生时才会被传递
3    this; // 监听的 dom 元素
4 }

　　示例

 1 function jqAjaxTest() {
 2   var jqRequestUrl = "AjaxHandlers.ashx"; //正确的文件名 AjaxHandler.ashx 这里故意写错 引发ajaxError事件
 3   $.post(jqRequestUrl + "?action=jquery", { userName: "jeff wong", location: "beijing" }, jqPostCallBack, "text");
 4 }
 5 //AJAX 请求发生错误时执行函数 (这一段放在jqAjaxTest函数内也可以)
 6 $("#divResult").ajaxError(function(event, request, settings) {
 7   $("#divResult").css("display", "block");
 8   $("#divResult").css("color", "red");
 9   $(this).append("
出错页面:" + settings.url);
10 });
11 function jqPostCallBack(oData) {
12   //在div中显示所有数据
13   $("#divResult").html(oData);
14   $("#divResult").css("display", "block");
15   $("#divResult").css("color", "red");
16 }

　　3、ajaxSend(callback)

　　AJAX 请求发送前执行函数。Ajax 事件。

　　XMLHttpRequest 对象和设置作为参数传递给回调函数。

　　返回值  jQuery

　　参数

　　callback (Function) : 待执行函数

　　示例

 1 function jqAjaxTest() {
 2   var jqRequestUrl = "AjaxHandler.ashx"; 
 3   $.post(jqRequestUrl + "?action=jquery", { userName: "jeff wong", location: "beijing" }, jqPostCallBack, "text");
 4 }
 5 //AJAX 请求发送前执行函数
 6 $("#divResult").ajaxSend(function(evt, request, settings) {
 7   $("#divResult").css("display", "block");
 8   $("#divResult").css("color", "red");
 9   $(this).append("
开始请求: " + settings.url + "
");
10 });
11 function jqPostCallBack(oData) {
12   //在div中显示所有数据
13   $("#divResult").append(oData);
14   $("#divResult").css("display", "block");
15   $("#divResult").css("color", "red");
16 }

　　4、ajaxStart(callback)

　　AJAX 请求开始时执行函数。Ajax 事件。

　　返回值  jQuery

　　参数

　　callback (Function) : 待执行函数

　　示例

 1 function jqAjaxTest() {
 2   var jqRequestUrl = "AjaxHandler.ashx"; 
 3   $.post(jqRequestUrl + "?action=jquery", { userName: "jeff wong", location: "beijing" }, jqPostCallBack, "text");
 4 }
 5 //AJAX 请求开始时执行函数
 6 $("#divResult").ajaxStart(function() {
 7   $("#divResult").css("display", "block");
 8   $("#divResult").css("color", "red");
 9   $(this).append("
请求开始了
");
10 });
11 function jqPostCallBack(oData) {
12   //在div中显示所有数据
13   $("#divResult").append(oData);
14   $("#divResult").css("display", "block");
15   $("#divResult").css("color", "red");
16 }

　　5、ajaxStop(callback)

　　AJAX 请求结束时执行函数。Ajax 事件。

　　返回值  jQuery

　　参数

　　callback (Function) : 待执行函数

　　示例

 1 function jqAjaxTest() {
 2   var jqRequestUrl = "AjaxHandler.ashx"; 
 3   $.post(jqRequestUrl + "?action=jquery", { userName: "jeff wong", location: "beijing" }, jqPostCallBack, "text");
 4 }
 5 //AJAX 请求开始时执行函数
 6 $("#divResult").ajaxStop(function() {
 7   $(this).append("
请求已经结束了
");
 8 });
 9 function jqPostCallBack(oData) {
10   //在div中显示所有数据
11   $("#divResult").append(oData);
12   $("#divResult").css("display", "block");
13   $("#divResult").css("color", "red");
14 }

　　6、ajaxSuccess(callback)

　　AJAX 请求成功时执行函数。Ajax 事件。

　　XMLHttpRequest 对象和设置作为参数传递给回调函数。

　　返回值  jQuery

　　参数

　　callback (Function) : 待执行函数

　　示例

 1 function jqAjaxTest() {
 2   var jqRequestUrl = "AjaxHandler.ashx"; 
 3   $.post(jqRequestUrl + "?action=jquery", { userName: "jeff wong", location: "beijing" }, jqPostCallBack, "text");
 4 }
 5 //AJAX 请求成功时执行函数
 6 $("#divResult").ajaxSuccess(function(evt, request, settings) {
 7   $(this).append("
请求成功
");
 8   $(this).append(settings.url);
 9 });
10 function jqPostCallBack(oData) {
11   //在div中显示所有数据
12   $("#divResult").append(oData);
13   $("#divResult").css("display", "block");
14   $("#divResult").css("color", "red");
15 }

三、其他

　　1、jQuery.ajaxSetup(options)

　　设置全局 AJAX 默认选项。

　　参数见 '$.ajax' 说明。

　　返回值  jQuery

　　参数

　　 options (可选) : 选项设置。所有设置项均为可选设置。 

　　示例

1 //设置 AJAX 请求默认地址为 "AjaxHandler.ashx"，禁止触发全局 AJAX 事件，用 POST 代替默认 GET 方法。其后的 AJAX 请求不再设置任何选项参数。 
2 $.ajaxSetup({
3   url: "AjaxHandler.ashx",
4   global: false,
5   type: "POST"
6 });

　　2、serialize()

　　序列化表单内容为字符串。

　　返回值  jQuery

　　参数

　　序列化表单内容为字符串，用于 Ajax 请求。

　　示例

1 $(document).ready(function() {
2   var oSerializedStr = $("form").serialize(); //序列化表单内容为字符串
3   $("#results").append("" + oSerializedStr + "");
4 });

　　文档片段

 1 
 2   

 3     Results: 
 4   
 5   

 6   
 7     Single
 8     Single2
 9   
10   
11     Multiple
12     Multiple2
13     Multiple3
14   

15   
16   check1
17   
18   check2
19   
20   radio1
21   
22   radio2
23   
24   
25 

　　3、serializeArray()

　　序列化表单内容，返回 JSON 数据结构数据。

　　返回值  jQuery

　　参数

　　序列化表单内容为JSON ，用于 Ajax 请求。

　　示例

1 $(document).ready(function() {
2   var fields = $("select, :radio").serializeArray(); //序列化表单select和raido为json
3   jQuery.each(fields, function(i, field) {
4     $("#results").append(field.value + " ");
5   }); 
6 });

jQuery封装好的ajax函数用起来确实方便，有了这样的“神兵利器”，以后写ajax的应用程序肯定会更加得心应手。

转载于:https://www.cnblogs.com/zuoyifeng/p/7844211.html