使用ajax提交form表單,包括ajax檔案上傳

來源:互聯網
上載者:User
使用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
相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.