JavaScript之Ajax-6 Ajax的加強操做(jQuery對Ajax的支持、表單操做)

1、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 

1、表單操做

使用 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

總結：本章內容主要介紹了 Ajax的加強操做(jQuery對Ajax的支持、表單操做)