foreword

Using ajax to request data, many people will, for example:

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

or ajax like this

$.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);                }            });

Likewise, many people will. But the more you write, the more you will find that, although you can avoid refreshing the page, we have to write a lot of js to get the data:

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

If the number is small, it's nothing, but if the data is very large, it will be very troublesome. Is there any easy way? The answer is definitely yes! The following two methods are introduced, which can greatly improve the efficiency of developers.

method

Method 1: Use the FormData object

The FormData object is an object of html5, and some of the current mainstream browsers are already compatible. Well, if you say ie8 or something, let's talk about the weather today, I didn't hear it. Ha ha, just kidding, if FormData is not supported, you can use method 2, which will be introduced below. Let's talk about FormData, it is a javascript object of html5, which is very powerful.

FormData can create an object out of thin air, then add data to the object, and then submit it directly without writing a line of html code , as follows:

          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);

This allows you to send form data to the browser , or you can use Jquery to send it like this:

 var form = new FormData();  form.append("username","zxj");  form.append("password",123456);　$.ajax({                url:"${pageContext.request.contextPath}/public/testupload",                type:"post",                data:form,                processData:false,                contentType:false,                success:function(data){                    window.clearInterval(timer);                    console.log("over..");                }});

This can also send data directly to the background.

Do you think this is over? Do not! This is just the beginning! !

Secondly, FormData also supports generating data directly from the form in html, that is, there is already data in the html page, and then FormData can directly write the data of this form into this object, and then submit it directly to the background

The code is as follows, first give the html code:

<form id="tf">            <input type="file" name="img"/>            <input type="text" name="username"/>            <input type="button" value="提" onclick="test();"/>                        ............. </form>

Did you notice that there are documents in it!

That's right, FormData also supports ajax upload files that have troubled many developers for a long time. In the past, when we uploaded files, we needed to write a form to refresh and submit directly, but we don't need it here. The submission code is given below:

        function test(){            var form = new FormData(document.getElementById("tf"));//             var req = new XMLHttpRequest();//             req.open("post", "${pageContext.request.contextPath}/public/testupload", false);//             req.send(form);            $.ajax({                url:"${pageContext.request.contextPath}/public/testupload",                type:"post",                data:form,                processData:false,                contentType:false,                success:function(data){ window.clearInterval(timer); console.log( "over.." ); }, error: function (e){ alert( "ERROR!!" ); window.clearInterval(timer); } }) ; get(); // here is the progress bar of the uploaded file         }

It's that simple, using FormData, when constructing this object, put the object of the form as a parameter, and that's it, and then FormData will get all the parameters in the form object, even if we are in the form, No need to declare enctype = "multipart/form-data", you can submit directly.

Using FormData, the first is that when submitting the form, you don't need to write a lot of js to get the form data, just construct the form object directly. The second is that you can upload files asynchronously directly, which is very simple and awesome!

Note: When using FormData to submit, you will notice that the form submitted is the request payload. Interested students can use Baidu. It is not submitted by the previous Form data, so the background also needs to be processed. For example, springMVC needs to be configured.

<!-- 配置nultipartresolver,注意：id名必须这样写，不然会报错 -->    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">        <property name="defaultEncoding" value="UTF-8"></property>        <property name="maxInMemorySize" value="10240000"></property>    </bean>

Otherwise, the data will not be received. Of course, in the background, we will ignore it here.

Method 2: Use jquery.form.js

Jquery.form.js is a powerful form plug-in, which provides a large number of convenient methods for form operations. Here are some descriptions of Jquery.form.js:

ajaxForm	Add all the required event listeners in preparation for the ajax form submission. ajaxForm does not submit forms. In the ready function of the document, use ajaxForm to prepare the form for ajax submission.	Accepts 0 or 1 arguments. The parameter can be a callback function or an Options object.	$("#formid").ajaxForm();
ajaxSubmit	Submit the form using ajax.	Accepts 0 or 1 arguments. The parameter can be a callback function or an Options object.	$("#formid").ajaxSubmit(); or $("#formid").submit(function(){ $(this).ajaxSubmit(); return false; });
formSerialize	Serialize (or serialize) the form into a query string. This method will return a string in the following format: name1=value1&name2=value2.	without	$("#formid").formSerialize();
fieldSerialize	Serialize (or serialize) the field elements of the form into a query string. This is handy when only some of the form fields need to be serialized (or serialized). Returns a string in the following format: name=value1&name2=value2.	without	$("#formid .specialFields").fieldSerialize();
fieldValue	Returns the value of the form element that matches the inserted array. This method returns the data in the form of an array. If the element value is determined to be potentially invalid, the array is empty.	without	$("#formid :password").fieldValue();
resetForm	Restore the form to its original state.	without	$("#formid").resetForm();
clearForm	Clear form elements. This method blanks all text, password, and textarea, clears the selection in the select element, and resets all radio buttons and checkbox buttons to the non-selected state.	without	$("#formid").clearForm();
clearFields	Clear field elements. Handy when only some form elements need to be cleared.	without	$("#formid .specialFields").clearFields();

Options object

Both ajaxForm and ajaxSubmit support numerous options parameters, which can be provided using an Options object.

target	Indicates the element in the page that is updated by the server response. The element's value may be specified as a jQuery selector string, a jQuery object, or a DOM element.	Default: null
url	Specifies the URL for submitting form data.	Default value: the action attribute value of the form
type	Specifies the method for submitting form data: "GET" or "POST".	Default: GET
beforeSubmit	The callback function to be called before the form is submitted. If the callback function returns false the form will not be submitted. The callback function takes three call parameters: the form data in the form of an array, the jQuery form object, and the Options object passed into ajaxForm/ajaxSubmit.	Default: null
success	Callback function called after the form is successfully submitted. Then the value of the dataType option determines whether the value of responseText or responseXML is returned.	Default: null
dataType	Returned data type: one of null, "xml", "script", "json".	Default: null
resetForm	Indicates whether to reset if the form is submitted successfully.	Default: null
clearForm	Indicates whether to clear the form data if the form is submitted successfully.	Default: null

So now let's talk about some of its main uses!

It also supports ajax submission of a form, and the submission method is simpler, as follows:

html:

<form id="tf">            <input type="file" name="img"/>            <input type="text" name="username"/>            <input type="button" value="提" onclick="test();"/>        </form>

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

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

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

感谢您的阅读，如果您觉得阅读本文对您有帮助，请点一下“推荐”按钮。本文欢迎各位转载，但是转载文章之后必须在文章页面中给出作者和原文连接。

前言

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

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

又或者是这样的ajax

$.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);                }            });

同样的，很多人也会。但是写的越多就越会发现，这样子虽然可以避免刷新页面，但是我们要写大量的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这样发送：

 var form = new FormData();  form.append("username","zxj");  form.append("password",123456);　$.ajax({                url:"${pageContext.request.contextPath}/public/testupload",                type:"post",                data:form,                processData:false,                contentType:false,                success:function(data){                    window.clearInterval(timer);                    console.log("over..");                }});

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

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

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

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

<form id="tf">            <input type="file" name="img"/>            <input type="text" name="username"/>            <input type="button" value="提" onclick="test();"/>                        ............. </form>

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

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

        function test(){            var form = new FormData(document.getElementById("tf"));//             var req = new XMLHttpRequest();//             req.open("post", "${pageContext.request.contextPath}/public/testupload", false);//             req.send(form);            $.ajax({                url:"${pageContext.request.contextPath}/public/testupload",                type:"post",                data:form,                processData:false,                contentType:false,                success:function(data){                    window.clearInterval(timer);                    console.log("over..");                },                error:function(e){                    alert("错误！！");                    window.clearInterval(timer);                }            });                    get();//此处为上传文件的进度条        }

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

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

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

<!-- 配置nultipartresolver,注意：id名必须这样写，不然会报错 -->    <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的说明：

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

Options对象

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

target	指明页面中由服务器响应进行更新的元素。元素的值可能被指定为一个jQuery选择器字符串、一个jquery对象、一个DOM元素。	默认值：null
url	指定提交表单数据的URL。	默认值：表单的action属性值
type	指定提交表单数据的方法（method）：“GET”或“POST”。	默认值：GET
beforeSubmit	表单提交前被调用的回调函数。如果回调函数返回false表单将不被提交。回调函数带三个调用参数：数组形式的表单数据，jQuery表单对象，以及传入ajaxForm/ajaxSubmit中的Options对象。	默认值：null
success	表单成功提交后调用的回调函数。然后dataType选项值决定传回responseText还是responseXML的值。	默认值：null
dataType	返回的数据类型：null、"xml"、"script"、"json"其中之一。	默认值：null
resetForm	表示如果表单提交成功是否进行重置。	默认值：null
clearForm	表示如果表单提交成功是否清除表单数据。	默认值：null

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

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