Ajax 相关函数LOGIN

Ajax 相关函数

Ajax 相关函数

jQuery 提供了一些相关函数能够辅助 Ajax 函数。

1. jQuery.ajaxSetup( options )

无返回值

说明:

设置全局 AJAX 默认 options 选项。

讲解:

有时我们希望设置页面上所有 Ajax 属性的默认行为.那么就可以使用此函数设置options选项, 此后所有的 Ajax 请求的默认options将被更改。

比如在页面加载时, 我使用下面的代码设置 Ajax 的默认 option 选项:

$.ajaxSetup({    url: "../data/AjaxGetMethod.aspx",    data: { "param": "ziqiu.zhang" },    global: false,    type: "POST",    success: function(data, textStatus) { $("#divResult").html(data); }});
此后我们可以使用无参数的get(),post()或者ajax()方法发送 ajax 请求.完整的示例代码如下:
<!doctype html><html><head>
 <meta charset="utf-8"/>
 <title>jQuery Ajax - Load</title>
 <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
 <script>
   $(document).ready(function() {
     $.ajaxSetup({
         url: "../data/AjaxGetMethod.aspx",
         data: { "param": "ziqiu.zhang" },
         global: false,
         type: "POST",
         success: function(data, textStatus) {
           $("#divResult").html(data);
         }
     });
     $("#btnAjax").click(function(event) { $.ajax(); });
     $("#btnGet").click(function(event) { $.get(); });
     $("#btnPost").click(function(event) { $.post(); });
     $("#btnGet2").click(function(event) { $.get("../data/AjaxGetMethod.aspx",{ "param": "other" }); });
   });  </script></head>  <body>    
 <button id="btnAjax">nontransfer param call ajax() method</button><br />
 <button id="btnGet">nontransfer param call get() method</button><br />
 <button id="btnPost">nontransfer param call post() method</button><br />
 <button id="btnGet2">transfer param call get() method , use global default callback</button><br />
 <br />
 <div id="divResult"></div>
</body>
</html>

注意当使用get()或者post()方法时,除了 type 参数将被重写为GET或者POST外, 其他参数只要不传递都是使用默认的全局option。如果传递了某一个选项, 比如最后一个按钮传递了url和参数,则本次调用会以传递的选项为准。没有传递的选项比如回调函数还是会使用全局option设置值。

2.serialize( )

Returns: String

说明:

序列表表格内容为字符串,用于 Ajax 请求。

序列化最常用在将表单数据发送到服务器端时。被序列化后的数据是标准格式, 可以被几乎所有的服务器端支持。

为了尽可能正常工作, 要求被序列化的表单字段都有 name 属性, 只有一个 eid 是无法工作的。

像这样写 name 属性: <input id="email" name="email" type="text" />

讲解:

serialize()函数将要发送给服务器的form中的表单对象拼接成一个字符串。便于我们使用 Ajax 发送时获取表单数据。这和一个form按照Get方式提交时, 自动将表单对象的名/值放到url上提交差不多。

3.serializeArray( )

Returns: Array< Object>

说明:

使用此函数获取到的是 JSON 对象,但是 jQuery 中没有提供将 JSON 对象转化为 JSON 字符串的方法。因此需要借助于插件,如原文中提到的jquery.json这个插件


下一节
<html> <head> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("div").text($("form").serialize()); }); }); </script> </head> <body> <form action=""> 姓名: <input type="text" name="FirstName" value="Bill" /><br /> 职位: <input type="text" name="LastName" value="Gates" /><br /> </form> <button>序列化表单值</button> <div></div> </body> </html>
提交重置代码
章节课件