easyui form提交和formdata提交记录

时间：2021-04-03 04:43:31

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

相关文章