使用ajax提交form表單,包括ajax檔案上傳 http://www.cnblogs.com/zhuxiaojie/p/4783939.html
前言
使用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 |