easyui form提交和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