表單提交總結(二):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較爲詳細的博客教程