使用ajax提交form表单，包括ajax文件上传

快来打我* 2022-07-24 12:15 257阅读 0赞

# [使用ajax提交form表单，包括ajax文件上传][ajax_form_ajax] #

http://www.cnblogs.com/zhuxiaojie/p/4783939.html

# 前言 #

使用ajax请求数据，很多人都会，比如说：

$.post(path,{data:data},function(data){
        ...
    },"json");

又或者是这样的ajax

![复制代码][copycode.gif]

$.ajax({
                    url:"${pageContext.request.contextPath}/public/testupload",
                    type:"post",
                    data:{username:username},
                    success:function(data){
                        window.clearInterval(timer);
                        console.log("over..");
                    },
                    error:function(e){
                        alert("错误！！");
                        window.clearInterval(timer);
                    }
                });

![复制代码][copycode.gif]

同样的，很多人也会。但是写的越多就越会发现，这样子虽然可以避免刷新页面，但是我们要写大量的js来到得数据：

var username = $("#username").val();
    var password = $("#password").val();
    ...

如果数量少的话，那还没有什么，但是如果数据十分大的话，那就十分的麻烦，那有没有什么简单的方法呢？答案肯定有的！下面介绍两种方法，可以极大的提高开发人员的效率。

# 方法 #

## 方法一：使用FormData对象 ##

FormData对象是html5的一个对象，目前的一些主流的浏览器都已经兼容。额，如果你说ie8什么的，那我们还是来谈谈今天的天气吧，我没听见。呵呵，开个玩笑，不支持FormData的，可以使用方法二，下面会介绍。接着说FormData，它是一个html5的[JavaScript][]对象，非常的强大。

FormData可以凭空创建一个对象，然后往这个对象里面添加数据，然后直接提交，不需要写一行html代码，如下：

var form = new FormData();
              form.append("username","zxj");
              form.append("password",123456);
              var req = new XMLHttpRequest();
              req.open("post", "${pageContext.request.contextPath}/public/testupload", false);
              req.send(form);

这样就可以向浏览器发送表单数据了，或者也可以使用[jQuery][]这样发送：

![复制代码][copycode.gif]

![复制代码][copycode.gif]

这样也可以直接发送数据到后台。

你以为这就完了？不！这才刚开始呢！！

其次FormData还支持直接从html中的表单生成数据，就是在html页面中已经有数据了，然后FormData可以直接把这个表单的数据写入这个对象，然后直接提交给后台

代码如下，先给出html代码:

大家注意到没有，里面可是有文件的哦！

没错，FormData还支持困扰众多开发者已久的ajax的上传文件，以前我们上传文件，需要写一个表单直接刷新提交，但是这里不需要，下面给出提交代码：

![复制代码][copycode.gif]

![复制代码][copycode.gif]

就是这么简单，使用FormData，在构造这个对象的时候，把表单的对象，作为一个参数放进去，就可以了，然后FormData，就会得到这个表单对象里面的所有的参数，甚至我们在表单中，都不需要声明enctype ="multipart/form-data" ，就可以直接提交。

使用FormData，第一是在提交表单的时候，不需要写大量的js来获得表单数据，直接把表单对象构造就行了。第二就是可以直接异步上传文件，简单牛逼爆了！

注意：使用FormData提交的时候，大家会注意到表单提交的是request payload，具体有兴趣的同学可以自己百度，它不是之前的Form data提交的，所以后台也是要经过处理的，比如springMVC就需要配置

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
            <property name="defaultEncoding" value="UTF-8"></property>
            <property name="maxInMemorySize" value="10240000"></property>
        </bean>

不然会接收不到数据，当然，后台的话，我们这里就先不管。

## 方法二：使用jquery.form.js ##

Jquery.form.js是一个强大的表单插件，其大量的提供了表单操作的各种简便的方法，下面给出一些Jquery.form.js的说明：

<table style="margin:0px; padding:0px; border-spacing:0px; border-collapse:collapse; border:1px solid silver; word-break:break-word"> 
 <tbody style="margin:0px; padding:0px"> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> ajaxForm</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 增加所有需要的事件监听器，为ajax提交表单做准备。ajaxForm并不能提交表单。在document的ready函数中，使用ajaxForm来为ajax提交表单进行准备。</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 接受0个或1个参数。参数可以是一个回调函数，也可以是一个Options对象。</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> $("#formid").ajaxForm();</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> ajaxSubmit</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 使用ajax提交表单。</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 接受0个或1个参数。参数可以是一个回调函数，也可以是一个Options对象。</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> <p style="margin:10px auto; padding-top:0px; padding-bottom:0px">$("#formid").ajaxSubmit();</p> <p style="margin:10px auto; padding-top:0px; padding-bottom:0px">或</p> <p style="margin:10px auto; padding-top:0px; padding-bottom:0px">$("#formid").submit(function(){ </p> <p style="margin:10px auto; padding-top:0px; padding-bottom:0px">&nbsp; &nbsp; $(this).ajaxSubmit();</p> <p style="margin:10px auto; padding-top:0px; padding-bottom:0px">&nbsp; &nbsp; return false;</p> <p style="margin:10px auto; padding-top:0px; padding-bottom:0px">});</p> </td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> formSerialize</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 将表单串行化（或序列化）为一个查询字符串。这个方法将返回以下格式的字符串：name1=value1&amp;name2=value2。</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 无</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> $("#formid").formSerialize();</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> fieldSerialize</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 将表单的字段元素串行化（或序列化）为一个查询字符串。当只有部分表单字段需要进行串行化（或序列化）时，使用这个就很方便了。返回以下格式的字符串：name=value1&amp;name2=value2。</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 无</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> $("#formid .specialFields").fieldSerialize();</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> fieldValue</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 返回匹配插入数组中的表单元素值。该方法以数组的形式返回数据。如果元素值被判定可能无效，则数组为空。</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 无</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> $("#formid :password").fieldValue();</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> resetForm</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 将表单恢复到初始状态。</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 无</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> $("#formid").resetForm();</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> clearForm</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 清除表单元素。该方法将所有的text、password、textarea置空，清除select元素中的选定，以及所有radio按钮和checkbox按钮重置为非选定状态。</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 无</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> $("#formid").clearForm();</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> clearFields</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 清除字段元素。只有部分表单元素需要清除时方便使用。</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 无</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> $("#formid .specialFields").clearFields();</td> 
  </tr> 
 </tbody> 
</table>

Options对象

ajaxForm和ajaxSubmit都支持众多的选项参数，这些选项参数可以使用一个Options对象来提供。

那么现在来说一些它的主要用法吧！

它也支持对一个表单的ajax提交，而且提交方式更为简便，如下：

html:

下面使用jquery.form.js的表单插件来提交表单

$("#tf").ajaxSubmit();

额，就是这么简单，你也不要问我为什么就是这么简单，然后它就是会把整个表单，作为一个ajax来提交，同样的，它也支持文件上传！一些其它的用法，请参照前面给出的说明就可以了！

[ajax_form_ajax]: http://www.cnblogs.com/zhuxiaojie/p/4783939.html
[copycode.gif]: /images/20220722/04b3dfb4be8245e7a355883d8986deeb.png
[JavaScript]: http://lib.csdn.net/base/18
[jQuery]: http://lib.csdn.net/base/22