Keep Coding ， Kevin Coder

1.j-Query版本

若是引用j-Query 3.x套件時候，不要使用slim版本，這版本不包含ajax

2.架構說明

<script>
    $(document).ready(function () {
        $("#getdata").click(function () {
            $.ajax({
                url: url,
                type: "post",
                datatype: "json",
                success: function(data){...},
                error: function() {...},
                complete: function() {...}
            });
        });
    });
</script>

參數	說明
url	要呼叫服務的網址，.NET MVC架構可以用url.Actioni("actionName")取代
type	使用怎麼樣的型態傳送資料，POST、GET基本會使用到的，若是Restful API的話還需要知道 PUT、DELETE的語意。
data	傳送到Server端的資料，若type屬性為GET，則data會轉換成query String的樣子(附加在網址後面)。通常會抓整個form的資料到後端，作法如下$("#formId").serialize()，會自動抓取name跟value來做成配對
contentType	把資料送出時的資料型態。預設值是："application/x-www-form-urlencoded; charset=UTF-8"。 如果要送出的是json則可改為"application/json"，通常是用在送出的資料是自己組合的時候。
datatype	Server端回傳的資料型態，如果沒有指定，jQuery會根據Http Mime Type自動選擇以reponseXML或responseText傳入你的success callback。 另外可以選擇的資料類型有: xml/HTML/SCRIPT/JSON/JSONP/TEXT
success	請求成功時執行的函式
error	請求失敗時執行函式
complete	請求完成時執行的函式，不論結果是success或error
beforeSend	請求發送之前可以執行的function，在此可以修改XMLHttpRequest物件，如添加header，也可以在此函式中return false取消ajax request
processData	有true(預設)/false，看data要不要依照contenttype進行轉換，true代表要，false代表不要;像是原來的contenttype是"application/x-www-form-urlencoded; charset=UTF-8"，那就會把data變成查詢字串(Querystring)，

其他小細節

a. 參數url，可以是大寫或小寫

b.在一般的情況下使用" "，或''是沒差別的

 

3.使用時機

a. <button>或<a> click事件，回Server端抓取資料並回傳，在畫面上呈現。

$("#getdata").click(function () {
   $.ajax({
      url: url,
      type: "post"....
               
   });
});

b. form傳送時，原來form點擊送出時會依form上的action屬性的設定，將form的資料送出至action的url，但此步驟會有頁面轉跳的情況，使用ajax模擬form送出的動作，可避免頁面轉跳。

$("#idForm").submit(function (e) {
    $.ajax({
        type: "POST",
        url: url,
        data: $("#idForm").serialize(),
        success: function (data) {
            alert(data);
        }
    });

    e.preventDefault();    //避免form執行自己送出的動作，若form沒有設定action屬性就可以不用寫這個
});

 

4.一個頁面多個ajax的情況

多個ajax但這些ajax在有些事件後行為可能相同，故使用全域事件控制，捕捉所有ajax的事件

a. 捕抓所有AJAX請求錯誤 .ajaxError()

$(document).ajaxError(function(){
    // your code here
})

下面的事件寫法跟上面的相同，參考如上即可。

b.捕捉所有AJAX完成事件 .ajaxComplete()

c.捕捉所有AJAX送出前事件 .ajaxSend()

d.捕捉所有送出後事件  .ajaxStart()

e.所有ajax執行完成事件 .ajaxStop()

f.所有ajax執行完成事件 .ajaxSuccess()

5.懶人包

純抓資料

<script>
    $(document).ready(function () {
        $("#getdata").click(function () {
            $.ajax({
                url: url,    
                type: "POST",
                datatype: "json",
                success: function (data) {
                    //成功後執行的動作... 1.(關閉modal) 2.alert 成功訊息　 3.可能會將資料append到頁面上，例如下面做法
                    
                    $.each(data,function(i,value){

                    });
                },
                error: function (data) {
                    //失敗後執行的動作... 1.alert 失敗訊息
                },
                complete: function (data) {
                   //完成後執行的動作...
                }
            });
        });
    });
</script>

上述寫法可以再使用j-Query的另一個方法 ，如下

$.getJSON(url,function(){...})