jQuery中的Ajax

時間 2020-08-18

標籤 jquery ajax 欄目 JQuery 简体版

原文原文鏈接

jQuery中的Ajax
----------------
**ajax()方法**

1. ajax()方法是功能最強大最齊全的請求服務器數據的方法
2. ajax()可以獲取服務器返回的數據
3. ajax()可以向服務器發送並傳遞數值
調用的格式：` jQuery.ajax([settings]) `或` $.ajax([settings]) `
參數[settings]爲發送ajax()請求時的各項參數的配置信息，鍵值對的形式寫入
如下是settings的全部可選屬性

``` async ```
布爾值，表示請求是否異步處理。默認是 true。php

``` beforeSend(xhr) ```
發送請求前運行的函數。html

``` cache ```
布爾值，表示瀏覽器是否緩存被請求頁面。默認是 true。jquery

``` complete(xhr,status) ```
請求完成時運行的函數（在請求成功或失敗以後均調用，即在success 和 error 函數以後）。
``` contentType ```
發送數據到服務器時所使用的內容類型。默認是："application/x-www-form-urlencoded"。
``` context ```
爲全部 AJAX 相關的回調函數規定 "this" 值。
``` data ```
規定要發送到服務器的數據。
```** dataFilter(data,type) **```
用於處理 XMLHttpRequest 原始響應數據的函數。
``` dataType ```
預期的服務器響應的數據類型。
``` error(xhr,status,error) ```
若是請求失敗要運行的函數。
``` global ```
布爾值，規定是否爲請求觸發全局 AJAX 事件處理程序。默認是 true。
``` ifModified ```
布爾值，規定是否僅在最後一次請求以來響應發生改變時才請求成功。默認是 false。
``` jsonp ```
在一個 jsonp 中重寫回調函數的字符串。
``` jsonpCallback ```
在一個 jsonp 中規定回調函數的名稱。
``` password ```
規定在 HTTP 訪問認證請求中使用的密碼。
``` processData ```
布爾值，規定經過請求發送的數據是否轉換爲查詢字符串。默認是 true。
``` scriptCharset ```
規定請求的字符集。
``` success(result,status,xhr) ```
當請求成功時運行的函數。
``` timeout ```
設置本地的請求超時時間（以毫秒計）
``` traditional ```
布爾值，規定是否使用參數序列化的傳統樣式。
``` type ```
規定請求的類型（GET 或 POST）。
``` url ```
規定發送請求的 URL。默認是當前頁面。
``` username ```
規定在 HTTP 訪問認證請求中使用的用戶名。
``` xhr ```
用於建立 XMLHttpRequest 對象的函數。
使用實例
參數屬性太多不便於在ajax()方法中更改設定，能夠用ajaxSetup()方法先行設置。（後面作介紹）

ajax

 $.ajax({
  url:"http://www.xxx.com/data/check.php",
              //要發送到的服務器URL
  data: { num: $("#txtNumber").val()} ,
               //將輸入的數字發送給服務器進行判別奇偶
  success: function (data) {
                            $("ul").append("<li>你輸入的<b>  "
                            + $("#txtNumber").val() + " </b>是<b> "
                            + data + " </b></li>");
                     //而後取回判斷結果
                        }
                    }

----------

jquery中異步提交數據的其餘方法
------------------

**load()方法**
load()方法是經過Ajax請求加載服務器中的數據，並把返回值數據放置到指定的元素中，該方法的調用格式爲： ` load（url,data,[callback]） `
其中參數

- url爲加載服務器的地址
- data（可選），爲請求時發送的數據
- callback爲請求成功後執行的回調函數
示例：

json

$(#button).load("data/fruit.html",function(){
      $this.attr("disabled","true");
});

此處第二個參數data缺省，實現點擊button摁鈕，向該地址發送數據，成功時把摁鈕變爲不可用

**getJSON()方法**
使用getJSON方法可以經過Ajax異步請求的方式，獲取服務器中的數據，並對數據進行解析，顯示在頁面中
getJSON()的使用格式爲：` $.getJSON(url,data,[callback]) `或者` jQuery.getJSON(url,[data],[callback]) `
- url爲加載服務器的地址
- data（可選），爲請求時發送的數據
- callback爲請求成功後執行的回調函數
------------------------例子-------------------------------------

瀏覽器

$(function(){
    $("#btnShow").bind("click",function(){
        var $this=$(this);
         $getJSON("Data/sport.json",function(data){
                  $this.attr("disabled","true") ;
                  $.each(data,function(index,sport){
                        $("ul").append("<li>"+sport["name"]+"</li>");
                   });
           })
     })
});

實現點擊頁面中的「#btnShow」按鈕，調用getJSON()方法獲取服務器中JSON格式文件中的數據，並用each()遍歷數據，將指定的字段名內容顯示在ul標籤中緩存

**getScript()方法**
調用getScript()加載並執行服務器中JavaScript格式的文件

``` $.getScript(url,[callback]) ```

**get()方法**
採用GET方式向服務器請求數據，並經過方法中回調函數的參數返回請求的數據

``` $.get(url,[callback]) ```

**post()方法**
post()方法多用於以POST方式向服務器發送數據，服務器接收到數據以後，進行處理，並將處理結果返回頁面
``` $.post(url,[data],[callback]) ```
**serialize()方法**
該方法能夠講表單元素的填寫內容進行序列化，生成標準的URL編碼文本字符串，該字符串便可用於直接進行ajax請求
``` $(表單元素).serialize() ```
![圖片描述][1]
**ajaxSetup()方法**
方法能夠設置Ajax請求的一些全局性選項值，設置完成後，後面的Ajax請求將不須要再添加這些選項值
調用格式：``` $.ajaxSetup([options]) ```
使用列子
服務器

//先進行ajaxSetup()設置
             $.ajaxSetup(
                {
                 data:{ num:$("#txtNumber").val()},
                 success:function(data){
                        $("ul").append("<li>你輸入的<b>  "
                            + $("#txtNumber").val() + " </b>是<b> "
                            + data + " </b></li>");
                    }
                });
//而後分別進行兩次ajax()請求
                $("#btnShow_1").bind("click", function () {
                    $.ajax({
                        data: { num: $("#txtNumber").val() },
                        url: "http://www.xxx.com/data/check.php"
                    });
                })
                $("#btnShow_2").bind("click", function () {
                    $.ajax({
                        data: { num: $("#txtNumber").val() },
                        url: "http://www.xxx.com/data/check_f.php"
                    });
                })

**ajaxStart()方法** 與 **ajaxStop()方法**
` ajaxStart(function()) `是方法在ajax請求觸發（啓動）後，但在請求發送前執行指定的函數
` ajaxStop(function()) `是在ajax請求成功後，執行的指定函數

app

$("#divload").ajaxStart(function(){
                    $(this).html("正在請求數據...");
                    alert("注意文字內容的變化哦");
                });
 $("#divload").ajaxStop(function(){
                    $(this).html("數據請求完成！");
                });
$("#btnShow").bind("click", function () {
                    var $this = $(this);
                    $.ajax({
                        url: "http://www.imooc.com/data/info_f.php",
                        dataType: "json",
                        success: function (data) {
                        $("ul").append("<li>請求成功</li>");
                        }
                    });
                })