ajax提交form表單,表單裡包括圖片
前言
使用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提交,而且提交方式更為簡便,如下:
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來提交,同樣的,它也支援檔案上傳!