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

原文地址:https://www.cnblogs.com/xhliang/p/7732261.html