在學(xué)習(xí)異步提交表單之前,先來(lái)學(xué)習(xí)幾個(gè)JQuery方法和屬性。
1、serialize():序列表格內(nèi)容為字符串。如下:
queryBean.orderBy=OperaTE_TIME&queryBean.orderSequnce=DESC&queryBean.title=&queryBean.PRovince=&queryBean.city=&selectID=ad78f509f2bc412fb9fe16e36d227a11&queryBean.orderBy=OPERATE_TIME&queryBean.orderSequnce=DESC&queryBean.page.intPage=1
2、serializeArray():序列化表格元素 (類似 ‘.serialize()’ 方法) 返回 JSON 數(shù)據(jù)結(jié)構(gòu)數(shù)據(jù)。
注意,此方法返回的是JSON對(duì)象而非JSON字符串。需要使用插件或者第三方庫(kù)進(jìn)行字符串化操作。
返回的JSON對(duì)象是由一個(gè)對(duì)象數(shù)組組成的,其中每個(gè)對(duì)象包含一個(gè)或兩個(gè)名值對(duì)——name參數(shù)和value參數(shù)(如果value不為空的話)。舉例來(lái)說(shuō):
[ { "name": "firstname", "value": "Hello" }, { "name": "lastname", "value": "World" }, { "name": "alias" }]3、data屬性:發(fā)送到服務(wù)器的數(shù)據(jù)。將自動(dòng)轉(zhuǎn)換為請(qǐng)求字符串格式。GET 請(qǐng)求中將附加在 URL 后。查看 processData 選項(xiàng)說(shuō)明以禁止此自動(dòng)轉(zhuǎn)換。必須為 Key/Value 格式。如果為數(shù)組,jQuery 將自動(dòng)為不同值對(duì)應(yīng)同一個(gè)名稱。如 {foo:[“bar1”, “bar2”]} 轉(zhuǎn)換為 “&foo=bar1&foo=bar2”。
4、dataType屬性:預(yù)期服務(wù)器返回的數(shù)據(jù)類型。如果不指定,jQuery 將自動(dòng)根據(jù) HTTP 包 MIME 信息來(lái)智能判斷,比如xml MIME類型就被識(shí)別為XML。在1.4中,JSON就會(huì)生成一個(gè)javaScript對(duì)象,而script則會(huì)執(zhí)行這個(gè)腳本。隨后服務(wù)器端返回的數(shù)據(jù)會(huì)根據(jù)這個(gè)值解析后,傳遞給回調(diào)函數(shù)。可用值:
“xml”: 返回 XML 文檔,可用 jQuery 處理。
“script”: 返回純文本 Javascript 代碼。不會(huì)自動(dòng)緩存結(jié)果。除非設(shè)置了”cache”參數(shù)。”’注意:”’在遠(yuǎn)程請(qǐng)求時(shí)(不在同一個(gè)域下),所有POST請(qǐng)求都將轉(zhuǎn)為GET請(qǐng)求。(因?yàn)閷⑹褂肈OM的script標(biāo)簽來(lái)加載)。
“json”: 返回 JSON 數(shù)據(jù) 。
“jsonp”: JSONP 格式。使用 JSONP 形式調(diào)用函數(shù)時(shí),如 “myurl?callback=?” jQuery 將自動(dòng)替換 ? 為正確的函數(shù)名,以執(zhí)行回調(diào)函數(shù)。
“text”: 返回純文本字符串
有時(shí)在A頁(yè)面點(diǎn)擊按鈕彈出一個(gè)form表單,在填完表單后提交成功后,需要關(guān)閉表單頁(yè)并將表單中的某些值反應(yīng)在A頁(yè)面上,這時(shí)就需要異步提交表單。其實(shí)也挺簡(jiǎn)單,只是需要把表單數(shù)據(jù)序列化。
<script type="text/javaScript"> $("#form1").submit(function (){ var ajax_url = "yourActionUrl"; //表單目標(biāo) var ajax_type = $(this).attr('method'); //提交方法 var ajax_data = $(this).serialize(); //表單數(shù)據(jù) $.ajax({ type:ajax_type, //表單提交類型 url:ajax_url, //表單提交目標(biāo) data:ajax_data, //表單數(shù)據(jù) success:function(msg){ if(msg == 'success'){//msg 是后臺(tái)調(diào)用action時(shí),你傳過(guò)來(lái)的參數(shù) //do things here window.close(); }else{ //do things here } } }); //return false; //阻止表單的默認(rèn)提交事件 });</script>代碼完成了兩個(gè)功能:1.輸入關(guān)鍵詞后按回車,會(huì)向server發(fā)送一個(gè)POST請(qǐng)求,然后異步提交表單,刷新部分頁(yè)面;2.輸入關(guān)鍵詞后,點(diǎn)擊查詢按鈕,也可異步刷新部分頁(yè)面。
此時(shí)要注意表單提交后發(fā)送的是POST請(qǐng)求,而點(diǎn)擊按鈕會(huì)發(fā)送一個(gè)GET請(qǐng)求,所以我們可以通過(guò)jQuery,使得按鈕點(diǎn)擊時(shí)觸發(fā)表單提交,這樣后端就不用再寫代碼處理GET請(qǐng)求。
為什么在這里說(shuō)的是模擬呢?因?yàn)槲覀兤鋵?shí)是將返回結(jié)果放在了一個(gè)隱藏的iframe中,所以才沒(méi)有使當(dāng)前頁(yè)面跳轉(zhuǎn),感覺(jué)就像是異步操作一樣。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="en"><head><meta charset="UTF-"><title>隱藏的iframe上傳文件</title><script type="text/javascript" src="jquery路徑..."></script></head><body> <iframe name="frm" style="display: none"></iframe> <form action="/upload" enctype="multipart/form-data" method="post" target="frm" onsubmit="loading(true);"> <p id="upfile"> 附件: <input type="file" name="myfile" style="display: inline"> </p> <p id="upbtn"> <input style="padding-left: px; padding-right: px;" type="submit" value="異步上傳"> <span id="uptxt" style="display: none">正在上傳...</span> </p> </form> <div id="flist" style="border: px dotted darkgray;"></div> <script> // 上傳完成后的回調(diào) function uploadFinished(fileName) { addToFlist(fileName); loading(false); } function addToFlist(fname) { var temp = ["<p id='" + fname + "'>",fname,"<button onclick='delFile(/""+fname+"/");'>刪除</button>","</p>"]; $("#flist").append(temp.join("")); } function loading(showloading) { if (showloading) { $("#uptxt").show(); } else { $("#uptxt").hide(); } } </script></body></html>這種技術(shù)有兩個(gè)關(guān)鍵的地方:
form會(huì)指定target,提交的結(jié)果定向返回到隱藏的ifram中。(即form的target與iframe的name屬性一致)。提交完成后,iframe中頁(yè)面與主頁(yè)面通信,通知上傳結(jié)果及服務(wù)端文件信息.如何與主頁(yè)面通信呢? 我們用nodejs在接收完了文件后返回了一個(gè)window.parent.主頁(yè)面定義的方法,執(zhí)行后可以得知文件上傳完成。代碼很簡(jiǎn)單:
router.post('/upload', multipartMiddleware, function(req, res) { var fpath = req.files.myfile.path; var fname = fpath.substr(fpath.lastIndexOf('//') + ); setTimeout(function() { var ret = ["<script>","window.parent.uploadFinished('"+fname+"');","</script>"]; res.send(ret.join("")); }, );});代碼有點(diǎn)多,但是通俗易懂。使用過(guò)AJAX的人都知道,XHR對(duì)象提供了一個(gè)onreadystatechange的回調(diào)方法來(lái)監(jiān)聽整個(gè)請(qǐng)求/響應(yīng)過(guò)程。在XMLHttpRequest2級(jí)規(guī)范中又多了幾個(gè)進(jìn)度事件。有以下6個(gè)事件: 1.loadstart: 在接收到響應(yīng)數(shù)據(jù)的第一個(gè)字節(jié)時(shí)觸發(fā)。 2.progress: 在接收響應(yīng)期間持續(xù)不斷地觸發(fā)。 3.error: 在請(qǐng)求發(fā)生錯(cuò)誤時(shí)觸發(fā)。 4.abort: 在因?yàn)檎{(diào)用abort()方法而終止連接時(shí)觸發(fā)。 5.load: 在接收到完整的響應(yīng)數(shù)據(jù)時(shí)觸發(fā)。 6.loadend: 在通信完成或者觸發(fā)error,abort,load事件后觸發(fā)。 這次我們可以解讀代碼:當(dāng)傳輸事件開始后,我們便在停止傳送按鈕上添加點(diǎn)擊事件,內(nèi)置了abort方法可以停止傳送。若不點(diǎn)則會(huì)正常上傳直到傳送完畢為止。其后臺(tái)代碼類似第二種方法。
此部分請(qǐng)參看FormData的詳細(xì)介紹及使用
新聞熱點(diǎn)
疑難解答
圖片精選