使用ajax提交form表單,包括ajax檔案上傳
前言
使用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(); varpassword = $("#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來提交,同樣的,它也支援檔案上傳!一些其它的用法,請參照前面給出的說明就可以了!
相關推薦
使用ajax提交form表單,包括ajax文件上傳 轉http://www.cnblogs.com/zhuxiaojie/p/4783939.html
ima option img jquery選擇器 open request resp logs ges 使用ajax提交form表單,包括ajax文件上傳 前言 使用ajax請求數據,很多人都會,比如說: $.post(path,{data:data},function
使用ajax提交form表單,包括ajax文件上傳
開發者 使用 sub 決定 發現 cli 也會 pos pre 前言使用ajax請求數據,很多人都會,比如說:$.post(path,{data:data},function(data){ ...},"json");又或者是這樣的ajax$.ajax({
ajax提交form表單,包括ajax檔案上傳
使用ajax請求資料,很多人都會,比如說: $.post(path,{data:data},function(data){ ... },"json"); 又或者是這樣的ajax $.ajax({ url:"${pageCont
使用ajax提交form表單,包括ajax檔案上傳
前言 使用ajax請求資料,很多人都會,比如說: $.post(path,{data:data},function(data){ ... },"json"); 又或者是這樣的ajax $.ajax({ url:"${pageContext.re
ajax提交form表單,表單裡包括圖片
前言 使用ajax請求資料,很多人都會,比如說: $.post(path,{data:data},function(data){ ... },"json"); 又或者是這樣的ajax $.ajax({ url:"${pageContext.request.c
ajax提交form表單,H5的required屬性沒起作用
1、 ajax提交form表單,required屬性不起作用 錯誤程式碼如下 <form id="order"> <input type="text" name="name" required /> <input type="submit
Ajax提交form表單,Ajax檔案上傳
平時我們會用到各種各樣的Ajax請求資料方式,下面我們就來說一下這個Ajax的表單提交,檔案上傳等等。。。 1.第一種,.post,.get方式 $.post(path,{data:data},function(data){ if(success){ }
ajax提交form表單,使用FormData。JQuery3.2
FormData這種用ajax提交form的方式在老版的JQ中是不行,我使用的是3.2版本,程式碼如下 <form id="formTest" action="ajaxTe" method="post" enctype="multipart/form-d
ajax提交form表單,關鍵程式碼:$("#theForm").serialize()
原始ajax提交: $.ajax({ type: "POST", data:"processId="+$("#processId").val()+"&delstepids="+delstepids, url: "./delSte
工作中如何使用ajax提交form表單,包括ajax文件上傳
msu 包括 需要 java tip ror 存儲 adf ucc 提供一種方法就是利用jquery.form.js,我們是和java對接的後臺。 代碼如下: <input type="text" id="text1"> <input type="text
ajax提交form表單到servlet,網頁的跳轉
jsp介面如下: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3
提交form表單---修改密碼 ajax、jQuery
改密 func 表單 eset password servlet 驗證 確認密碼 密碼 <form id ="password" method="post"> <table > <tr> <td>原密碼:<
Ajax 提交表單【包括文件上傳】
color .ajax log clas multipart slim turn tex size 利用js插件實現 <script src="@Url.Content("~/js/layer/jquery.form.min.js")"></script&
三層+EasyUI+Ajax 提交Form表單
log src body 提交 easy orm img yui class 三層+EasyUI+Ajax 提交Form表單
使用ajax提交form表單
使用FormData物件 FormData物件是html5的一個物件,目前的一些主流的瀏覽器都已經相容,非常的強大 FormData可以憑空建立一個物件,然後往這個物件裡面新增資料,然後直接提交,不需要寫一行html程式碼,如下: var form = new FormData(); form.appe
JQuery ajax提交form表單實現檔案上傳
<!DOCTYPE html> <html> <head> <title></title> <script src="https://cdn.bootcss.co
ajax 提交form表單的 檔案上傳
搞檔案上傳,要麼使用 檔案上傳控制元件! 先非同步上傳之後獲取上傳之後的檔案內容,最後再把 檔案資訊和其他相關內容一起提交給後臺。 要麼就是一個 form表單 ,把檔案和其他資訊一把都傳向後臺! 但是form表單上傳之後, 往往都是會跳轉頁面的。 所以就想要 可以ajax 上傳檔案。 百度
ajax提交form表單問題
form表單提交資料可以省下大量大量獲取元素的程式碼,區域性重新整理時也可以用ajax提交form表單,但是要先把表單序列化,再把後臺javaBean物件序列化,但是你有可能前後臺都執行了系列化,但是後臺還是接受不到物件,會出現400錯誤,400錯誤為請求錯誤,很多時候是引數異常,表單序列化出現400錯誤,很
jdngao+bootstrap的ajax提交form表單Demo
jdngao+bootstrap的ajax提交form表單Demo,完整例項程式碼: 1,html程式碼 {% load bootstrap3 %} <form enctype="multipart/form-data" id="form" method="post" cla
頁面ajax提交form 表單 以及後臺接收
var data = $("#addform").serialize(); $.ajax({ url : "", data : data, type : 'post', //資料傳送方式