談談jQuery中Ajax那些事

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