利用jQuery實作Ajax的封裝的步驟分享

這篇文章給大家分享的內容是利用jQuery實現Ajax的封裝的步驟分享，有著一定的參考價值，有需要的朋友可以參考一下

load方法

• load(url,[data],[callback])。 data為提交的數據，callback為回呼函數，回呼函數可以傳三個參數，response stutas xhr，第一個參數為從伺服器端返回的內容，第二個參數為回應狀態success或error，第三個參數為底層js中XMLHttpRequest物件

• $('#box').load(url)。可直接將從目標位址取得的內容載入填入目前頁面的某處。

全域方法get（）

• $.get(url,[data],[callback],type) type表示傳回內容的格式，若不設定返回原本格式，強行轉換可能會取得失敗

全域方法post（）

• $.post(url, [data],[callback])。

全域方法getJSON（）

• #$.getJSON（）(url,[data],[callback])。

• 用於特定情況下載入json檔案

#全域方法getSCRIPT（）

• $ .getSCRIPT（）(url,[data],[callback])。

• 用於特定情況下載入js檔案。一般不用。

全域方法ajax（）

• 只ajax()方法只傳遞一個參數，即一個包含若干鍵值對的物件。

• 最常用的格式：

$.ajax({
  url:, //请求的地址
  type:, //请求的方式'GET'或'POST'
  data:{
        },  //提交的信息
  dataType: 'json',//设置返回内容的数据类型
  timeout:  ,//设置超时，请求超过了这个时间值就会结束请求
  global: ,//设置是否触发全局事件，true或false
  error: function(xhr,errorText,errorType){//响应失败时执行的错误处理函数,会传三个参数，xhr对象，错误信息，错误类型
       }
  success:function(response,stutas,xhr){//响应成功后执行的回调函数
     console.log(response);
      },
  beforeSend : function(){//请求开始之前触发该事件},
complete : function(){//请求结束之后触发该事件}
})

表單序列化

• 常規資料提交方式：假設提交資料為表單中的使用者名稱和郵件地址
  

• data:{ user:document.getElementById(‘user’), 
  emall:document.getElementById(‘emall’)//用dom方法或其他方法只要能获取到数据都行 
   }

• 表單序列化：
  data：$('form').serialize (),//序列化後得到的是字串形式的資料鍵值對，並且對url進行了編碼。函數serialize（）的作用物件可以是整個表單也可以是表單元素，但只能是jQuery物件。

• param()方法
  $.param()方法是serialize()方法的核心，用來將一個陣列或物件依照key/value進行序列化。
  對於第一種直接傳遞一個物件的提交方式，可以用此函數對整個物件進行序列化。

data:$ .param({   
  user:document.getElementById('user'),
     emall:document.getElementById('emall')
    } )

• serializeArray（）方法
  serializeArray方法是將一個表單當中的各個欄位序列化成一個json格式的陣列。

載入請求

 jQuery提供两个全局事件。.ajaxStart和.ajaxStop。Ajax请求开始时会触发开始事件，请求结束时会触发结束事件。

$(document).ajaxStart(function(){
     //请求开始时触发的行为
        }).ajaxStop(function(){
     //请求结束时触发的行为})

jQuery xhr物件

jqXHR物件就是$.ajax()方法傳回的對象，它是jsXHR物件的一個超集。

var jqXHR = $.ajax(      
      url:, //请求的地址            
      type:, //请求的方式'GET'或'POST'
      data:{
                      },  //提交的信息
             )；

jqXHR物件提供了許多新的屬性與方法，支援以連綴的方式去寫。可以多次執行同一個回呼函數，而不會被覆蓋。

以上是利用jQuery實作Ajax的封裝的步驟分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！