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>
章節課件