easyui form提交和formdata提交記錄，查看FormData對象內部的值

1  easyui form提交

$('form').form('submit',{
　　url:'';
　　onSubmit:'';
　　success:function(data){
        //這種方法獲取到的data是字符串的形式，須要將數據進行轉化方可利用其內部的數據
      　　data=JSON.parse(data);
　　　  if(data.result){
　　　　}　
　　}
})            

提交的數據是利用jquery 中的serialize()方法，將表單中的數據轉化爲請求字符串的形式，咱們能夠使用$('form').serialize();來查看要提交的數據；

可是在此過程當中必定注意若表單中有相似textarea的控件 ，且在輸入域中輸入了空格，獲取到的參數信息會轉化爲‘+’號（par1=other&par2=-1&par3=sss+fffff++ffff）

是由於URL規範裏就是要求空格在query string裏被編碼爲加號吧。

詳見（https://en.wikipedia.org/wiki/Query_string#URL_encoding）

注：相似於$().serialize() 方法還有 $().serializeArray 和$().param(arr)方法，能夠查看jquery手冊學習

  　　$("#results").append( "<tt>" + $("form").serialize() + "</tt>" );

2  formData提交

新建FormData對象時有兩種方將數據加載到實例對象中，其中之一是利用FormData對象的append方法，其二是將form表單元素做爲參數傳遞到FormData構造函數內；以下：

    (1) var fd =  new FormData(); 
　　　　　fd.append("username", "Groucho");
　　　　　// fileInputElement中已經包含了用戶所選擇的文件
　　　　　fd.append("userfile", fileInputElement.files[0]);
 
    (2) var formData = new FormData(form);  //內部form值須要時js原生對象

 

針對formdata須要注意兩點：

    1 想要查看FormData對象內部的值時 須要使用方法entries()（對於ie8及如下存在兼容性問題 解決方法詳見https://segmentfault.com/q/1010000007439070?_ea=1345861） ；

    2 form表單元素想要傳遞文件須要加入Multipart/form-data

 

  var i = formData.entries();
　　i.next(); 
　　i.next();
//或者下面是等效的
   for(var item of formData.entries()){
　　console.log(item[0]+','+item[1]);
　　}

利用formdata進行圖片文件上傳時 ，當圖片文件 爲空時 ，會傳入一個文件流，後臺可能沒有辦法判斷該數據是否爲空，這就須要前端驗證空參數時不傳對應值

能夠利用formdata一項一項添加來修改上面的小bug

 var fd = new FormData();
      var postTitleVal = $('#titleId').val();
      var imgfileVal = $('#imgfile')[0].files;
      var postContentVal = $('#body_text').val();

      fd.append("postTitle",postTitleVal);

//注意下面的添加圖片，當爲多個時，必定要一個一個進行添加，不然不會正確的傳值，以下面的圖片所示
      for(var i = 0;i < imgfileVal.length;i++){
          fd.append("imgfile",imgfileVal[i]);
      }
      fd.append("postContent",postContentVal);
      return fd;

當多圖片時不進行一個一個添加時會顯示下面的結果，傳給後臺的是一個不能識別的object

------WebKitFormBoundarye3BrkT7fRq8QF9FF

Content-Disposition: form-data; name="imgfile"

[object FileList]

當直接用var fd = new Formdate（）時，有圖片有選擇時以下能夠正常的進行傳輸

------WebKitFormBoundaryv1LffBUkzjtPjHxQ
Content-Disposition: form-data; name="imgfile"; filename="Koala.jpg"
Content-Type: image/jpeg
------WebKitFormBoundaryv1LffBUkzjtPjHxQ
Content-Disposition: form-data; name="imgfile"; filename="Lighthouse.jpg"
Content-Type: image/jpeg

當不選圖片時（即空參數），會傳入一個 文件流，後臺可能沒有辦法判斷該數據是否爲空，可能會形成頁面圖片顯示空白的bug
------WebKitFormBoundaryABIeO4Mf7StP4CdB
Content-Disposition: form-data; name="imgfile"; filename=""
Content-Type: application/octet-stream

 

詳見：

https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects

https://segmentfault.com/a/1190000006716454#articleHeader11

詳見  http://blog.csdn.net/xiaojianpitt/article/details/6856536

 

form表單元素想要傳遞文件必定注意須要加入Multipart/form-data

 

 總結：上傳數據格式經常使用的有:

        1 請求字符串 name=value&age=3的形式；

　　 2 json對象形式；

　　 3 formData對象格式；

固然也能夠有其餘類型，詳見http://www.cnblogs.com/haitao-fan/p/3908973.html

https://developer.mozilla.org/en-US/docs/Web/API/FormData/entries