常見的Ajax寫法彙總

title: Ajax寫法
date: 2018-06-30 11:01:47
tags: Ajax寫法

作者:李忠林

Github: https://github.com/Leezhonglin

Gitblog: https://leezhonglin.github.io/

什麼是AJAX?

AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。

AJAX 不是新的編程語言，而是一種使用現有標準的新方法。

AJAX 最大的優點是在不重新加載整個頁面的情況下，可以與服務器交換數據並更新部分網頁內容。

AJAX 不需要任何瀏覽器插件，但需要用戶允許JavaScript在瀏覽器上執行。

常見的寫法有:

1.方式一

1.方式一
$.ajax({
    url:'',
    type:'',
    dataType:'',
    data:'',
    headers:'',
    success:function(msg){
        
    },
    error: function(msg){
        
    }
});

參數含義:

url: 要求爲String類型的參數，（默認爲當前頁地址）發送請求的地址。

type: 要求爲String類型的參數，請求方式（post或get）默認爲get。注意其他http請求方法，例如put和delete也可以使用，但僅部分瀏覽器支持.

dataType: 要求爲String類型的參數，預期服務器返回的數據類型。如果不指定，JQuery將自動根據http包mime信息返回responseXML或responseText，並作爲回調函數參數傳遞。可用的類型如下：xml：返回XML文檔，可用JQuery處理。html：返回純文本HTML信息；包含的script標籤會在插入DOM時執行。script：返回純文本JavaScript代碼。不會自動緩存結果。除非設置了cache參數。注意在遠程請求時（不在同一個域下），所有post請求都將轉爲get請求。json：返回JSON數據。jsonp：JSONP格式。使用SONP形式調用函數時，例如myurl?callback=?，JQuery將自動替換後一個“?”爲正確的函數名，以執行回調函數。text：返回純文本字符串。

data: 要求爲Object或String類型的參數，發送到服務器的數據。如果已經不是字符串，將自動轉換爲字符串格式。get請求中將附加在url後。防止這種自動轉換，可以查看　　processData選項。對象必須爲key/value格式，例如{foo1:"bar1",foo2:"bar2"}轉換爲&foo1=bar1&foo2=bar2。如果是數組，JQuery將自動爲不同值對應同一個名稱。例如{foo:["bar1","bar2"]}轉換爲&foo=bar1&foo=bar2。

success:要求爲Function類型的參數，請求成功後調用的回調函數，有兩個參數。 (1)由服務器返回，並根據dataType參數進行處理後的數據。 (2)描述狀態的字符串。 function(data, textStatus){ //data可能是xmlDoc、jsonObj、html、text等等 this; //調用本次ajax請求時傳遞的options參數 }

error: 要求爲Function類型的參數，請求失敗時被調用的函數。該函數有3個參數，即XMLHttpRequest對象、錯誤信息、捕獲的錯誤對象(可選)。ajax事件函數如下： function(XMLHttpRequest, textStatus, errorThrown){ //通常情況下textStatus和errorThrown只有其中一個包含信息 this; //調用本次ajax請求時傳遞的options參數 }

header: 在python框架django中前端發起ajax請求如果是post請求需要傳csrf參數就是通過header傳的

2: 方式二 get請求簡寫

$.get(url,function(msg){
    
});

3: 方式三 post請求簡寫

$.post(url,data,function(msg){
    
});

4: 方式四 提交上傳文件

$(this).ajaxSubmit({
    url:'',  
    type:'',
    dataType:'',
    data:'',
    headers:'',
    success:function(msg){   
    },
    error: function(msg){
        
    }
})
return false;  //阻止主動第二次提交

5, 前端有多個值需要獲取

$('#form-house-info').submit(function () {
    var a = $(this).serialize() //獲取多個值
    $.post('/house/newhouseinfo/', a ,function (data) {
​
        if (data.code == '200'){
            location.href = '/house/myhouse/'
        }
    });
    return false;
});