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);
    });
});