jquery Ajax提交表单

于 2017-12-31 19:52:16 发布
阅读量315 收藏 1
点赞数
分类专栏： web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/myy629464/article/details/78942933
版权 
 FormData是html5的接口，使用它一行代码便可以拿到整个form表单对象：
     var form = new FormData(document.getElementById("form"));
然后我们拿着这个form对象，去赋给Ajax的data，并且阻止它将参数转成成String类型的键值对，此举需要设置processData属性为false，此属性默认为true；同时设置Ajax的编码方式为false（contentType: false），在form表单里已经设置了编码方式，Ajax的编码机制已经不需要，这样我们就可以用Ajax去提交一个form对象，从而解决表单有附件的问题。需要注意的是，务必将Ajax的提交方式，设置为post，get请求只能携带几kb的数据。若是不设置processData为false，去提交带附件的form同样是提交不上去的，它的序列化机制是硬伤。所以提交的时候，只能不使用它的序列化机制。
      一言以蔽之：借Ajax的壳，去提交form。
示例如下：
 <!DOCTYPE html>  
<html>  
<head>  
    <script src="js/jquery-1.9.1.min.js"></script>  
    <meta charset="utf-8" />  
    <title>Ajax提交form</title>  
    <script type="text/javascript">  
    function test(){  
      var form = new FormData(document.getElementById("form"));  
      $.ajax({  
      url:"接口地址",  
      type:"post",  
      data:form,  
      cache: false,  
      processData: false,  
      contentType: false,  
      success:function(data){  
            alert("操作成功！");  
      },  
      error:function(e){  
          alert("网络错误，请重试！！");  
       }  
      });          
    }  
</script>  
</head>  
<body>  
<form id="form"  enctype="multipart/form-data">  
    <input type="text" id="name" name="name" />  
    <input type="text" id="phone" name="phone" />  
    <input type="text" id="content" name="content" />  
    <input type="text" id="price" name="price" />  
    <input type="text" id="ifPhone" name="ifPhone" />  
    <input type="text" id="ifCerName" name="ifCerName" />  
    <input type="text" id="endTime" name="endTime" />  
    <input type="text" id="type" name="type" />  
<input type="file" id="fileAttach" name="fileAttach" />  
<input type="button" οnclick="test()" value="上传" />  
</form>  
</body>  
</html>

Ryan丿Limit
关注
专栏目录
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值