171202之ajax提交整个form表单(二)

表单提交方法有三种，主要说下第三种
第一种：用 form 自带属性action 提交

  <form action="/servlet/query" method="post" id="myForm">       <input type="text" name="userName" id="userName"/>       <input type="submit" id="btnSubmit" value="提交"/>  </form>

第二种：用 jquery 提交：$("#formid").submit();
jquery提交表单有两种情况：
1：jquery只做提交用。$("form").submit();
这个的表单提交到什么地方的是更具form元素里面的action属性去定义的。
2：jquery用ajax提交数据。

$.ajax({    type:"post",    url:"xxx.php",      // 这里是提交到什么地方的url    data:{},            // 这里把表单里面的数据放在这里传到后台    dataType:"json",    success:function(res){        // 调用回调函数    }});

第三种：用 ajax 提交：
但如果form表单中数据很多时，不可能一一列出，只需要用
$(‘#yourformid’).serialize()就可以了
举例如下：

$.ajax({    cache: true,    type: "POST",    url:  ajaxCallUrl,    data: $('#yourformid').serialize(),// 你的formid    async: false,    error: function(request) {        alert("Connection error");    },    success: function(data) {        $("#commonLayout_appcreshi").parent().html(data);\    }});

这样的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可以凭空创建一个对象，然后往这个对象里面添加数据，然后
直接提交，不需要写一行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"));            $.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的用法及三种提交表单方式

参考博客：https://www.cnblogs.com/zhuxiaojie/p/4783939.html