JavaScript：Ajax在Django中的應用、jquery事件綁定、jquery事件委託、serialize、serializeArray獲取form的輸入值

一、初識Ajax

Ajax是屬於javaScript的一種方法，簡單明瞭的說，其功能就是在實現Web頁面不刷新的情況下，向後臺發起請求，進而更新Web頁面部分數據。

1.1 什麼時候適合使用Ajax向後臺發送請求喃？下面我們就列舉一下：

a.對話框方式：1.數據量小或條目少；2.【新增】功能、【編輯/更新】功能、【刪除】功能；

需要注意的是：a.模態對話框基礎；b.table中td統一自定義屬性，而且儘量與新增、更新編輯對話框的標籤屬性一樣，同時與數據庫字段一樣；c.列表可在當前頁刷新的情況（避過分頁、排序……）；

b.登錄場景一般也可使用Ajax

1.2 什麼時候使用新URL方式請求後臺？簡單歸類：1.獨立的頁面；2.數據量大或條目多；

二、Ajax的基本格式

$.ajax({
    url:"/xxxx/",     #路徑

    type:"POST",      #請求方式：POST或者GET

    data：{'key1':'value1','key2':'value2',……}， #請求數據，必須是dict類型;

    success:function(arg){
        '回調函數，參數arg是String類型'
    }
})

三、Ajax的dataType、traditional字段

上面的格式是基本的Ajax方式格式；疑問：

1.若data中，有參數是“一對多”的情況，即類似於：‘key’:["1","2","3"]，那怎麼辦？

2.arg作爲返回的全部的值，是String類型（注：django的httpresponse返回值也必須是string類型），如何可以簡單的變爲數據原來的類型？

$.ajax({
    url:"/xxxx/",     #路徑

    type:"POST",      #請求方式：POST或者GET

    data：{'key1':'value1','key2':'value2',……}， #請求數據，必須是dict類型;

    dataType:'JSON',    ##解決返回信息arg爲JSON對象(就可以通過關鍵字調用其值了)，而不是String;

    traditional:true,   ##解決data可以上傳類似：‘key’：["1","2","3"]的一對多的情況的數據
    success:function(arg){
        '回調函數，參數arg是String類型'
    }
})

三、jquery的事件綁定

Web頁面到處可發生點擊事件，所以今天要記錄一下事件綁定；事件綁定的基本的模式：

#在引入jquery文件、js插件後：
<script>

    $( function() {

        bindEventname();
        bindEventname1();
        …………
    
    });#頁面一加載，就會執行這段事件綁定；

    function bindEventname(){
        $('綁定的元素').click( function(){
            #下面就是click事件之後，要實現的功能；舉例：id="addModel"的模態對話框彈出；
            $("#addModal").modal('show');
            })
    }

    function bindEventname1(){
        $('xxx').click(function () {
            …………；
            })
    }
    …………

</script>

四、jquery的事件委託

假如，一個列表有很多行（tr）與很多列（td）;在使用js對列表的行進行增加一行數據時，需要增加這個行所包含的操作事件（如：編輯、刪除）；需要重新加載頁面最新的這條數據纔會實現綁定事件（如：編輯、刪除），但是ajax又不刷新頁面，造成了最新的這一行數據的操作功能實現不了（因爲頁面最初加載時，就已經綁定了之前行的所有事件，最新加的一行數據，不會綁定）；所以，你對最新一行數據點擊【刪除/編輯】的時候，沒有反應，而點擊其它行的【刪除/編輯】是正常執行的，因此，這個時候需要事件委託；

事件委託的意思：將列表裏面的如編輯、刪除這樣的點擊事件委託在列表（tbody）身上，那麼頁面最初加載就綁定了tbody身上的事件；即便是ajax更新的最新一行數據，其編輯、刪除等事件都在tbody上；事件委託的格式：

jquery3:
$('要綁定標籤的上級\上上級……標籤，比如：一行的按鈕，就可以選擇表tbody').on('要綁定的事件','要綁定的標籤',function(){………………})

舉例：
  $("#stu").on("click",'.edit-row', function () {
                $("#editModal").modal("show");
});
##：'stu'是tbody的id屬性值，'edit-row'是列表一行數據的編輯按鈕的class

#######################################################################################

jquery2:
$('要綁定標籤的上級標籤').delegate('要綁定的標籤','要綁定的事件',function(){……
})

五、table列表、'新增'對話框、'編輯'對話框…頁面元素屬性需要注意點

這個不是什麼知識，但是是自己覺得應該記錄下來提醒自己的基本點；

1.table列表、'新增'對話框、'編輯'對話框…由於id、name在元素與元素之間不可重複，且很有可能與數據庫有關；所以，在添加屬性值或變更屬性值時，儘量變更class的值，而不是id、name；

2.自定義屬性儘量有業務意義；

3.模態對話框的使用應該在bootstrap中可以尋得；如：新增數據後，點擊【保存】，模特對話框關閉，關閉後，還應該清除模態對話框裏面的元素的值，可在bootstrap尋得；

4.js在頁面新增的一行，使用for循環時，一定要將屬性與列表數據保持一致；td也應該有自定義屬性，方便取值時，使用js在頁面獲取；（如：刪除一行操作，是需要彈框提示的，點擊彈框的‘’確認‘’，才真正執行刪除；所以需要在table獲取到那條數據的id，隱藏在提示框中；編輯也是需要隱藏數據）

六、Ajax的seriable、serializeArray,內容拾遺，保留form表單的全部輸入值，類型:dict

在提交一個表單時，使用Ajax向後臺發送請求，需要dict類型的數據data；我們如何獲取模態對話框裏面的數據？再轉換爲dict類型通過ajax發送至後臺；

方式一：

$("#saveBtn").click(function () {
                var stuData ={};
                $("#addModal").find("input,select").each(function () {
                    var v=$(this).val();
                    var n=$(this).attr("name");
                    if(n=='gender'){
                        if($(this).prop("checked")){
                            stuData[n] = v ;
                        }
                    }else {
                        stuData[n] = v ;
                    }
                });