自我總結和學習表單提交的幾種方式 (二)

表單提交感覺項目中用到的次數越來越多了，但是遇到的問題也越來越多，使用的解決方式也層出不齊，利用周末時間，自己學習學習，然後繼續總結下幾種表單提交的方式。

【4】傳統submit提交方式攔截，改造成ajax提交

<form id="form" enctype="multipart/form-data">
    <label for="name">姓名：</label>
    <input type="text" id="name" data-bind="value:vm.name" /><br />
    <label for="address">住址：</label>
    <input type="text" id="address" data-bind="value:vm.address" /><br />
    <label for="tel">手機號：</label>
    <input type="text" id="tel" data-bind="value:vm.tel" /><br />
    <input type="submit" value="添加" />
</form>

    $("#form").submit(function () {
        var model = ko.mapping.toJS(vm.entity);
        $.ajax({
            url: '@Url.Action("AddCustomInfo")',
            type: this.method,
            dataType: "Json",
            data: { fileInfo: model },
            success: function (data) {
                if (data.result) {
                    layer.alert("添加成功！");
                    $("#myModal").modal("hide");//隱藏彈框
                }
            }
        });
        return false;//阻止表單提交
    });

【5】利用已有JS插件進行表單提交

利用JS插件進行提交時，會有兩種形式的插件，一種是先非同步上傳文件，然後再提交表單，並不是一併提交，另一種是一併把文件提交給後臺進行接收。

舉幾個例子是利用先提交文件方式的：

如：layui.upload 

再有 elementUI也是先要提交文件到伺服器，然後其它信息隨後提交過來，當然element有一個DataList屬性可以隨帶一些需要的數據，那也是不錯的方式

此處我就不粘貼代碼了...偷個懶

【6】jQuery表單插件

這種方式在很多地方見到了

利用的是攔截submit，然後將表單中的所有信息提交到後臺，需要註意的是，這必須得保證要填寫信息的html元素必須要由name ,這是根據name進行後臺模型轉換的依據，至少來講在asp.net mvc中是必須的。

操作的步驟就是首先下載jquery.form.js包，當然的前提是jquery.js包必須存在，這像一句廢話，哈哈

表單寫好後，在js代碼中，

    $("#form").submit(function () {
        $(this).ajaxSubmit(function () {
            //執行你想要的回調函數
        });
        return false;//阻止表單預設提交
    });
    //或是
    $("@form").ajaxForm(function () {
        //執行你想要的回調函數
    });

ajaxForm()和ajaxSubmit()都可以接受0個或一個參數，接受一個參數可以是回調函數也可以是一個options對象。具體信息可以參見其它博友的文章

options對象中包含了很多參數，通過設置這些參數，可以將我們需要的限制，信息，函數一併設置好，然後

    $("#form").submit(function () {
        $(this).ajaxSubmit(options);
        return false;//阻止表單預設提交
    });
    //或者
    $("#form").ajaxForm(options);

【7】利用H5新功能 FormData

這個對象將我們需要提交的屬性信息囊括其中，然後以表單形式提交給後臺，是相當方便的形式，同樣強大到可以將多文件進行後臺提交

這種情形下麵我們不需要一個特定的submit按鈕甚至是說完全拋棄form表單的概念，最終將需要提交的信息直接加入到formData對象中即可

    $("#add").click(function () {
        var formData = new FormData();
        formData.append("file", document.getElementById("file").files[0]);
        formData.append("name", vm.name());
        formData.append("address", vm.address());
        formData.append("tel", vm.tel());

        $.ajax({
            url: '@Url.Action("addCustomInfo")',
            type: 'Post',
            dataType: "Json",
            processData: false,
            contentType: false,
            data: formData,
            success: function (data) {
                if (data.result) {
                    layer.alert("添加成功！");
                    $("#myModal").modal("hide");//隱藏彈框
                }
            }
        });
    });

註意這裡的append(屬性名,屬性值)；其中屬性名需要和後臺接收參數名需要對應，這是表單提交的前提，並且ajax中需要設置contentType為false，processData為false,記得上次我備註了這兩個屬性是由於瀏覽器的差異，如此做可以屏蔽瀏覽器差異性，當然formData是新特性，需要IE10以上才能支持了

該想的都想完了，也總結完了，如有更多好的方式，請和我分享，我也想學習更多東西。哈哈。知識是個好東西。

2017-12-08,望技術有成後能回來看見自己的腳步。