關於JQuery中$.get()和$.post()和$.ajax()的區別和使用


  

首先,這三個方法都是Ajax方法中一種與服務器交換數據的請求類型。

 

一、$.get()

  $.get() 方法使用 HTTP GET 請求從服務器加載數據。

  使用格式: $.get(url,[data],[callback]) 

  說明: url為請求地址,

      data為請求數據的列表(是可選的,也可以將要傳的參數寫在url里面),

      callback為請求成功后的回調函數,該函數接受兩個參數,第一個為服務器返回的數據,第二個參數為服務器的狀態,是可選參數

      (其中,服務器返回數據的格式其實是字符串形勢,並不是我們想要的json數據格式,在此引用只是為了對比說明。)  

1 $("button").click(function(){
2   $.get("url",function(data,status){
3     alert("Data: " + data + "nStatus: " + status);
4   });
5 }); 

官方語法: $.get(URL,data,function(data,status,xhr),dataType)  

參數 描述
URL 必需。規定您需要請求的 URL。
data 可選。規定連同請求發送到服務器的數據。
function(data,status,xhr) 可選。規定當請求成功時運行的函數。
額外的參數:
  • data - 包含來自請求的結果數據
  • status - 包含請求的狀態("success"、"notmodified"、"error"、"timeout"、"parsererror")
  • xhr - 包含 XMLHttpRequest 對象
dataType 可選。規定預期的服務器響應的數據類型。
默認地,jQuery 會智能判斷。
可能的類型:
  • "xml" - 一個 XML 文檔
  • "html" - HTML 作為純文本
  • "text" - 純文本字符串
  • "script" - 以 JavaScript 運行響應,並以純文本返回
  • "json" - 以 JSON 運行響應,並以 JavaScript 對象返回
  • "jsonp" - 使用 JSONP 加載一個 JSON 塊,將添加一個 "?callback=?" 到 URL 來規定回調

 

二、 $.post()

  $.post() 方法使用 HTTP POST 請求從服務器加載數據。

  官方語法: $(selector).post(URL,data,function(data,status,xhr),dataType)  

參數 描述
URL 必需。規定將請求發送到哪個 URL。
data 可選。規定連同請求發送到服務器的數據。
function(data,status,xhr) 可選。規定當請求成功時運行的函數。
額外的參數:
  • data - 包含來自請求的結果數據
  • status - 包含請求的狀態("success"、"notmodified"、"error"、"timeout"、"parsererror")
  • xhr - 包含 XMLHttpRequest 對象
dataType 可選。規定預期的服務器響應的數據類型。
默認地,jQuery 會智能判斷。
可能的類型:
  • "xml" - 一個 XML 文檔
  • "html" - HTML 作為純文本
  • "text" - 純文本字符串
  • "script" - 以 JavaScript 運行響應,並以純文本返回
  • "json" - 以 JSON 運行響應,並以 JavaScript 對象返回
  • "jsonp" - 使用 JSONP 加載一個 JSON 塊,將添加一個 "?callback=?" 到 URL 來規定回調

這個函數跟$.get()參數差不多,多了一個type參數,type為返回的數據類型,可以是html,xml,json等類型,如果我們設置這個參數為:json,那么返回的格式則是json格式的,如果沒有設置,就 和$.get()返回的格式一樣,都是字符串的。

$.post("emp.do?p=getAllEmp",{id:deptId,x:Math.random()},function(data){
            var arry = eval("("+data+")");//去引號,將json字符串去引號編程json類型數組,也可以在$.post函數后面加一個參數"json",指定接收的數據為json類型的
            for(var i=0;i<arry.length;i++){
                var op = new Option(arry[i].empName,arry[i].empId);
                document.getElementById("emp").options.add(op);
            }
        });

 

三、$.ajax(opiton)

  與上面兩個相比,這個可以執行精確的需求控制。

  ajax() 方法用於執行 AJAX(異步 HTTP)請求。

  所有的 jQuery AJAX 方法都使用 ajax() 方法。該方法通常用於其他方法不能完成的請求

  官方語法: $.ajax({name:value, name:value, ... })  

而所有可能出現在括號里面的參數列表如下: (比較重要和常見的已經標紅)

名稱 值/描述
async 布爾值,表示請求是否異步處理。默認是 true。
beforeSend(xhr) 發送請求前運行的函數。
cache 布爾值,表示瀏覽器是否緩存被請求頁面。默認是 true。
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 對象的函數。

示例:

 

 1 //根據id查詢數據
 2 $.ajax({ 
 3     type:"POST",    //請求類型
 4     url: "你的url地址", 
 5     dataType:"json",//服務器返回的數據類型
 6     async: false,    //是否同步
 7     data:{             //這里需要注意的是,這個data是做為參數傳值到后台的,因為是post,所以可以定義多個
 8         "id" : id
 9         //"name": "youName",    //注意,這里只是示范,冒號前面為變量名稱,后面為需要傳遞的值
10         //"age" : "youAge",
11         //"sex" : "youAge",
12         //"other" : "other"
13         },
14     success:function(data){      //回調結果,如果成功
15         if(data.status == 0){    //判斷狀態碼
16             //刷新
17             $("#easyuiDatagrid").datagrid("reload");
18         }
19     },
20     failure:function(result) { 
21             parent.$.messager.show({title : "提示",msg : "失敗,請聯系管理員",timeout : 3000});
22         }
23     });

 


參考:  

  $.ajax() 參數詳細說明:http://www.cnblogs.com/tylerdonet/p/3520862.html

  三個方法區別詳細解讀:http://www.cnblogs.com/liuling/archive/2013/02/07/sdafsd.html

  Ajax方法集的鏈接:http://www.runoob.com/jquery/jquery-ref-ajax.html 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM