表单提交总结(二):ajax上传表单

　　上篇总结了下表单验证的几种方案，不过传统的表单提交会导致页面的刷新，某些时候我们并不想页面刷新希望表单提交后有个返回结果以便于我们进行些其他操作。这时候简单粗暴的一种方案是禁用表单提交，然后使用ajax上传.
表单

<form id="form" action="" onsubmit="return false;"> 
   <input type = "text" name="title"/>
   <input type = "text" name="author"/> 
</form>

js代码

var title = $("#title").val();
var author = $("#author").val();
$.ajax({  
　　url:"form-test.do",
　　type:"post",
　　dataType: 'json',
　　data:{
       'title':title,
       'author':author
   },
　　success:function(data){
　　　　console.log(data);
　　},
　　error:function(XMLHttpRequest, textStatus, errorThrown){
　　　　alert("错误！！");
　　　　console.log(XMLHttpRequest.status);
　　　　console.log(XMLHttpRequest.readyState);
　　　　console.log(textStatus);
　　}
});

　　这种方案在表单元素比较多时需要我们写大量的js来获取数据,显然这是十分麻烦的。使用jquery的serialize()将表单数据序列化,就可以简单的用一行语句将表单的所有数据带入ajax中提交到后端。

$.ajax({ 
   url: "form-test.do", 
   type: "POST", 
   data: $('#form').serialize(), 
   success: function(data) {   
       console.log(data);
   }, 
   error: function(data) {
   } 
});

　　上述方式只能传递一般的参数，上传文件的文件流是无法被序列化并传递的。那有没有更好的方案可以用ajax发送包含文件上传的表单呢?答案是有的,下面介绍两种方式：

1.使用jquery.form.js

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

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

使用js进行表单的提交：

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

　　是不是很简单！它会把整个表单作为一个ajax来提交,当然它会支持文件的上传。其他的用法参考一下官方的方法就ok了。
　　github地址

2.使用formdata

　　上面的方法对有些懒癌症或者强迫症的同学而言，是绝不乐意引入过多第三方js库的。别担心,还有另外一种方式可以实现同样的功能，只要你的页面是html5，目前绝大多数浏览器已经支持formdata对象。
　　html表单
　　

<form id="formdata" action="" enctype ="multipart/form-data" method="post">
        名字:<input type="text" name="name">
        简介:<input type="text" name="info">
        <input type="file" name="file">
    </form>

js代码

var formData = new FormData($( "#formdata" )[0]);  
$.ajax({  
     url: 'formdata.do' ,  
     type: 'POST',  
     data: formData,  
     async: false,  
     cache: false,  
     contentType: false,  
     processData: false,  
     success: function (returndata) {  
         alert(returndata);  
     },  
     error: function (returndata) {  
         alert(returndata);  
     }  
});

FormData是一个表单对象，他可以将表单对象的表单域分别形成key=>value。那么是不是我们自己再拼接额外的key=>value呢，详情请google。

相关链接
form.js较为详细的博客教程