一、jQuery對Ajax的支援
load()
- 作用: 将伺服器傳回的資料位元組添加到符合要求的節點之上
- 用法:
$obj.load(請求位址，請求參數)
- 請求參數
- "username=tom&age=22"
- {'username':'tom','age':22}
- 有請求參數時，load方法發送POST請求，否則發送GET請求
get()
- 作用: 發送GET類型的請求
- 用法: $.get(請求位址，請求參數，回調函數，伺服器傳回的資料類型)
- 說明:
- 回調函數添加的參數是伺服器傳回的資料
- 伺服器傳回的資料類型:
html: HTML文本
text: 文本
JSON: js對象
xml: XML文檔
script: JavaScript腳本
ajax()
- 用法: $.ajax({});
- {}内可以設定的選項參數
- url: 請求位址
- type: 請求方式
- data: 請求參數
- dataType: 伺服器傳回的資料類型
- success: 伺服器處理正常對應的回調函數
- error: 伺服器出錯對應的回調函數
- async: true(預設)
getScript()
- 作用: 通過 HTTP GET 請求載入并執行 JavaScript 檔案
- 用法: $.getScript(url,success(response,status));
- url: 将要請求的URL字元串
- success(response,status):可選，規定請求成功後執行的回調函數
response - 包含來自請求的結果資料
status - 包含請求的狀态
sucess
notmodified
error
timeout
parsererror
一、表單操作
使用 Ajax 送出資料
- step 1: 擷取表單元素，通過
document.getElementById或者jQuery的工廠函數擷取頁面元素值
- step 2: 将擷取的頁面元素值拼湊成字元串或者JSON字元串
- step 3: 使用Ajax異步送出表單
表單的序列化
- 序列化: 将對象狀态轉換為可保持或傳輸的格式過程
- 表單序列化:将表單元素轉換為可送出的字元串或者JSON字元串
- 通過序列化可以輕松實作資料存儲和傳輸
- 在jQuery中可以通過serialize()方法将表單元素序列化成普通字元串，通過serializeArray()方法将表單元素序列化成JSON字元串
serialize()方法
- 格式: var data = $("#formId").serialize();
- 功能: 将表單内容序列化成一個字元串
- 這樣在ajax送出表單資料時，就不用一一列舉出每一個參數。隻需将data參數設定為$("#formId").serialize()即可
serializeArray()方法
- 格式: var jsonData = $("#formId").serializeArray();
- 功能: 将頁面表單序列化成一個JSON結構的對象。注意不是JSON字元串
- 比如, [{"name":"wcm","age":"18"},{...}]擷取資料為jsonData[0].name
異步表單的送出
- 可以通過Ajax異步的送出表單，進而獲得良好的使用者體驗
- step 1: 擷取表單送出方式、伺服器位址、序列化表單
- step 2: 通過Ajax 異步的将内容送出給伺服器
- step 3: 表單送出方法中傳回false，即阻止表單預設送出
使用jQuery.form異步送出表單
- jQuery Form 插件是一個優秀的Ajax表單插件，可以非常容易地、無侵入地更新 HTML表單及支援Ajax
jQuery Form 有兩個核心方法 -- ajaxForm() 和 ajaxSubmit()，它們集合了從控制表單元素到決定如何管理送出程序的功能
- ajaxForm(): 不能送出表單。在document的ready函數中，使用ajaxForm來為Ajax送出表單進行準備
- ajaxSubmit(): 馬上由Ajax來送出表單。你可以在任何情況下進行該項送出
- ajaxForm() 和 ajaxSubmit() 都能接受0個或1個參數，當為單個參數時，該參數既可以是一個回調函數，也可以是一個options對象
beforeSubmit:showRequest
success:showResponse