談談jQuery中Ajax那些事

莊國琳發表於2018-09-14
jQuery

jQuery中的Ajax

jQuery不僅對JavaScript語言進行了封裝，也對Ajax非同步互動進行了封裝，jQuery提供了6個Ajax操作的方法：
1.load()方法
2.$.get()方法和$.post()方法
3.$.ajax()方法
4.$.getScript()方法和$.getJSON()方法
jQuery除了封裝了六個Ajax操作的方法，還提供了一下幾種事件：
1.ajaxStart()和ajaxStop()事件
2.ajaxComplete()事件、ajaxSend()事件、ajaxError()事件和ajaxSuccess()事件

  • load()方法

load()方法是jQuery中最為簡單的Ajax方法

/*load(url,data,callback)方法
引數：
url：非同步請求的地址
data：非同步請求的資料
如果省略請求資料的話，當前的請求方式為GET
如果傳送請求資料的話，當前的請求方式為POST
callback：非同步請求成功後的回撥函式
返回值：伺服器端的響應結果
注意：自動將返回結果寫入到目標元素中
 */
//html程式碼:
<button></button>
//JavaScript程式碼：
$(`button`).click(function(){
    $(`button`).load(`data/server.json`,function(){
        console.log(`非同步請求成功....`);
    });
});
  • get()方法
/*
    $.get(url,data,callback,type)方法:請求方式為GET
    引數：
    url:非同步請求的地址
    data:非同步請求的資料
    callback：非同步請求成功後的回撥函式
    type：設定伺服器端響應結果的格式
    xml、html、script、json、text等
*/
$.get(`data/server.json`,{name:`張三`},function(data){
    console.log(data);
},`json`);
  • post()方法
/*
    $.post()方法：請求方式為POST
    引數：
    url：非同步請求的地址
    data：非同步請求的資料
    callback：非同步請求成功後的回撥函式
    type：設定伺服器端響應結果的格式xml、html、script、json、text等
*/
$.post(`data/server.json`,{name:"張三"},fucntion(data){
    console.log(data);
},`json`);
  • ajax()方法
/*
    $.ajax(url,[settings])方法
    引數：
    url：請求地址
    settings：設定非同步請求的引數
    settings選項：物件型別
    type：設定請求方式
    data:傳送給伺服器端的請求資料
    dataType：伺服器端響應結果的格式
    success：非同步請求成功後的回撥函式
    function(data,textStatus,jqXHR){}
    data:表示伺服器響應的結果
    textStatus：表示伺服器端當前的狀態
    jqXHR：Ajax中的核心物件
*/
$.ajax(`data/server.json`,{
    type:`get`,
    dataType:`text`,
    success:function(data){
        console.log(data);
    }
});
  • getScript()方法
html程式碼：
<button>按鈕</button>

JavaScript程式碼：
$(`button`).click(function(){
       //動態載入指定JavaScript檔案，並且執行
    $.getScript(`data/server.js`,function(data){
        console.log(data);
    })
});
  • getJSON()方法
html程式碼：
<button>按鈕</button>

JavaScript程式碼：
$(`button`).click(function(){
    //getJSON()方法的請求方式為GET
    $.getJSON(`data/server.json`,{name:`張三`},function(data){
        console.log(data);
    })
});
  • 表單序列化

專門針對表單的方法，可以快速獲取表單input裡面的value，但是必須在表單中新增name屬性，否則獲取不到

html程式碼：
<form>
    <input type=`text`>
    <input type=`password`>
    <input type=`submit`>
</form>

JavaScript程式碼：
$(`form`).bind(`submit`,function(event){
    //阻止提交按鈕的預設行為
    event.preventDefault();
    //表單序列化：根據表單預設同步提交獲取資料的方式
    //var data=$(`form`).serialize();
    var data=$(`form`).serializeArray();
    //通過一部互動提交表單
    $,post(`data/server,json`,data,function(data){
           console.log(data);
    });
});

相關文章