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

------WebKitFormBoundarye3BrkT7fRq8QF9FFContent-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

转载于:https://www.cnblogs.com/xhliang/p/7732261.html