jQuery中FormData的使用

web中數據提交事件是常常發生的，但是大多數情況下我們不希望使用html中的form表單提交，因為form表單提交會中斷當前瀏覽器的操作並且會調到另一個地址（即使這個地址是當前頁面），並且會重復加載一些html浪費帶寬，我們希望達到一個無刷新的、異步的提交效果來給用戶更好的體驗，這時候就要使用ajax，ajax可以不依賴表單自行發起一次http請求並且取回服務器響應的數據，這就是ajax的簡便之處。我們這里使用JQuery中封裝好的ajax函數，更加簡便。下面列舉幾個使用ajax異步提交數據的方法。


一：jquery.js中的$.ajax方法

此方法依賴jquery.js插件，有很多版本，可以自己下載。

我們需要在此$.ajax方法中指定一些參數，比如請求地址、請求類型、所需要傳輸的數據、請求成功后需要執行的操作，這里簡略說一下。

        $.ajax({
            url:"你的url地址",
            type:'post',
            data:{key:'value'},
            success:function(){
                alert('成功')；
            }
        })

 

這是$.ajax方法的簡單用法。其中參數data是你要傳輸的數據，這里的data支持Json對象和字符串。data數據如果是一個form表單里面的，自己寫一個json很慢，可以使用jquery里面的serizlize()方法。這個方法返回一個字符串（每個form表單提交的時候也是轉化為相同格式的字符串）。

        $.ajax({
            url:"你的url地址",
            type:'post',
            data:$('form').serialize(), // "id=asdasd&s=000&name=1233"
            success:function(){
                alert('成功')；
            }
        })

 

--------------------------------------------------------------------------------------------------------------------------

那么，文件也是這樣提交的嗎？

對於文件的提交我們需要對$.ajax進行一些特殊的設置，並且使用FormData的對象。

      <input type="file" name="f" id="f" multiple>

            var fd = new FormData();
            fd.append("name", "bill");
            fd.append("photo", $('#f')[0].files[0]);
            fd.append("photo2", $('#f')[0].files[1]);
            $.ajax({
                url: '/webform1.aspx',
                type: 'post',
                processData: false,
                contentType: false,
                data: fd,
                success: function () {
                    alert("ok")
                }
            })

 

我們創建一個fd對象並向其中添加鍵值對，這個值可以是一個文件。$('#f')[0]是取出id=f的元素，至於為什么是[0]，這是因為jquery對象都有一個默認為0的索引用來取出其Dom元素，$('f')是一個jquery對象，[0]為Dom元素 可以用dom的所有屬性和方法。然后使用files來取出文件。這里我使用了files[0]和files[1]，這是multiple可以上傳多個文件我這里上傳了兩個。

然后服務器就可以接收文件了，和表單一樣的接收方法。

當然可以把一個form直接轉化為一個FormData對象，這樣我們可以避免把所需內容一個個append到FormData里面。

    var fd = new FormData(document.querySelector("form"));
    fd.append("CustomField", "This is some extra data");
    $.ajax({
      url: "stash.php",
      type: "POST",
      data: fd,
      processData: false,  // 不處理數據
      contentType: false   // 不設置內容類型
    });

 

使用append添加時formdata的key若已存在，則不能重復添加，會忽略本次append操作，這在對於使用經常需要表單取出值是相當不利的，所以建議使用set方法來添加新的key-value值，set的意思是修改一個已經存在的鍵值對，如果不存在的話就創建一個。即

fd.set("CustomField", "This is some extra data");



$.ajax是主動事件，而我們希望當用戶點擊按鈕才執行，這里可以將$.ajax函數放在一個按鈕的click事件里面，也可以使用下面的方法。

    $('form').submit(function{
      // 你自己的代碼，一般是數據合法性驗證
    $.ajax({
         
       });
       return false;
    })

submit函數可以在表單被提交時執行，我們可以用來將其作為執行$.ajax函數的觸發事件，然后使用return false來提前阻止這個表單的提交。


注意：有些文章里說FormData的兼容問題，FormData很早就提出來了。並且入股喲你想要使用jquery里面的ajax來傳輸文件就免不了使用它這是因為下面兩個方法也用到了FormData。當然原生的ajax有直接傳輸文件的方法，感興趣的人可以看下。

二：jquery.form.js中的ajaxSubmit、ajaxForm方法。

這兩個依賴jquery.form.js插件，可以自行下載。

上面的ajax可以自己來封裝數據，即使這個數據不在form表單里面，但是這兩個方法都是對form表單的數據都來自form表單。ajaxSubmit類似於$.ajax直接將數據提交，為了延緩提交要寫在一個觸發事件里面。而ajaxform相當於上面寫到的$('form').submit函數,是將一個表單變成異步的。

其中ajaxForm相當於

    $('form').submit(function(){
        $('form').ajaxSubmit(function(){});
    })

來看ajaxForm的源代碼



在ajaxForm里面多次出現doAjaxSubmit，其實ajaxForm里面的數據提交調用的就是ajaxSubmit。

----------------------------------------------------------------------------------------------------------------------------------------------

那么對於上傳文件呢？沒關系，這兩個方法可以提交表單中的文件。我上面說了這兩個其實用的也是FormData，來看ajaxSubmit源碼



總結

1.ajax的data的類型支持字符串和json對象。

2.可以使用$('form').serialize()來獲取表單里面的非文件數據轉化為字符串。

3.使用FormData對象來傳輸文件，FormData 對象的字段類型可以是 Blob, File, 或者 string: 如果它的字段類型不是Blob也不是File，則會被轉換成字符串類型。

4.請注意，使用append添加時formdata的key若已存在，則不能重復添加，會忽略本次append操作，所以建議set替代append來使用

5.當然可以使用ajax原生方法來傳輸文件，有興趣的可以研究下。

6.建議使用jquery里面的$('form').submit()、$.ajax({})的組合來完成異步提交。

 

注意:

在 Laravel 中提交了半天馬歌姬的，老是提交不上去，一直報 jQuery 的錯，弄了半天發現是 FormData 的問題。

我拿着 file 文件對象一個一個 append 到 FormData 里，最后用的 $.post 方法在那兒傻啦吧唧的提交了半天

呸，什么瘠薄玩意兒，才發現 processData 這玩意兒在使用 FormData 作為數據體時是不能開啟的

而 $.post 里默認又是開啟的【你就不能自己識別一下 data 的數據類型自己判斷下？】

所以只能用 $.ajax 這個方法了：

var data = new FormData();

// 額外的數據直接傳就行了
data.append('_token', 'xxxxxxxxxxxxxxx');

$(files).each(function(idx){
    data.append('file[]', files[idx]); // append 走一圈，第三個參數文件名稱可空
});

$.ajax({ // $.post，告辭
    type: 'post',
    contentType: false, // 關關關！必須得 false
                        // 這個不關會扔一個默認值 application/x-www-form-urlencoded 過去，后端拿不到數據的！
                        // 而且你甚至不能傳個字符串 'multipart/form-data'，后端一樣拿不到數據！
    processData: false, // 關關關！重點
    url: '/upload',
    data: data,
    success: function (response) {
        // TODO
    }
}); 

 

 

1.創建：var formData = new formData();

2.添加鍵值對：formData.append('key','value');

3.發送數據：$.ajax({

　　　　 　　url: "server.php",

　　　　　　type: "POST",

　　　　　　data: formData ,

　　　　　　processData: false,// 告訴jQuery不要去處理發送的數據(必須設置)

　　　　　　contentType: false, // 告訴jQuery不要去設置Content-Type請求頭（必須設置）

　　　　　　success: function(response,status,xhr){

　　　　　　}

　　　　});

注意事項：.FormData對象的操作方法，全部在原型中，自己本身沒任何的屬性及方法。

let formData = new FormData() formData.append('user', 'zhang') 獲取 formData.get('user') //zhang 刪除 formData.append('user')