異步提交表單的6種方式

2024-04-27 15:06:41

字體：大中小

來源：轉載

供稿：網友

在學習異步提交表單之前，先來學習幾個JQuery方法和屬性。

1、serialize()：序列表格內容為字符串。如下：

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 數據結構數據。

注意，此方法返回的是JSON對象而非JSON字符串。需要使用插件或者第三方庫進行字符串化操作。

返回的JSON對象是由一個對象數組組成的，其中每個對象包含一個或兩個名值對——name參數和value參數（如果value不為空的話）。舉例來說：

[ { "name": "firstname", "value": "Hello" }, { "name": "lastname", "value": "World" }, { "name": "alias" }]

3、data屬性：發送到服務器的數據。將自動轉換為請求字符串格式。GET 請求中將附加在 URL 后。查看 processData 選項說明以禁止此自動轉換。必須為 Key/Value 格式。如果為數組，jQuery 將自動為不同值對應同一個名稱。如 {foo:[“bar1”, “bar2”]} 轉換為 “&foo=bar1&foo=bar2”。

4、dataType屬性：預期服務器返回的數據類型。如果不指定，jQuery 將自動根據 HTTP 包 MIME 信息來智能判斷，比如xml MIME類型就被識別為XML。在1.4中，JSON就會生成一個javaScript對象，而script則會執行這個腳本。隨后服務器端返回的數據會根據這個值解析后，傳遞給回調函數。可用值:

“xml”: 返回 XML 文檔，可用 jQuery 處理。

“script”: 返回純文本 Javascript 代碼。不會自動緩存結果。除非設置了”cache”參數?！薄⒁猓骸薄谶h程請求時(不在同一個域下)，所有POST請求都將轉為GET請求。(因為將使用DOM的script標簽來加載)。

“json”: 返回 JSON 數據。

“jsonp”: JSONP 格式。使用 JSONP 形式調用函數時，如 “myurl?callback=?” jQuery 將自動替換 ? 為正確的函數名，以執行回調函數。

“text”: 返回純文本字符串

一、Ajax方式

二、submit方式

有時在A頁面點擊按鈕彈出一個form表單，在填完表單后提交成功后，需要關閉表單頁并將表單中的某些值反應在A頁面上，這時就需要異步提交表單。其實也挺簡單，只是需要把表單數據序列化。

三、submit方式2

<html><head><script type="text/javaScript">　　 jQuery(document).ready(function (){　　 jQuery('#search_form').bind("submit", function(){ 　　 var key_Word = jQuery("#keyword").val(); 　　 if(key_word == ""){ 　　 return false; 　　 } 　　 var options = { 　　 url: '/portrait/user_info_display?user_info_keyword=' + key_word, 　　 type: 'post', 　　 dataType: 'text', 　　 data: $("#search_form").serialize(), 　　 success: function (data) { 　　 if (data.length > 0){ 　　 jQuery("#user_info").html(data); 　　 } 　　 } 　　 }; 　　 $.ajax(options); 　　 return false;　　 }); 　$('#search').click(function(){ $('#search_form').submit(); 　　 });　　});</script></head><body> <form mothod="post" id="search_form"> <div class="cf"> <label class="search-bar"> <input id="keyword" placeholder="請輸入搜索關鍵詞" name="user_info_keyword" type="text" value="" class="input-search"> <a id="search" class="btn-search"> <i class="icon-search"></i> </a> <a href="javascript:;" class="btn-more"></a> </label> </div> </form></body></html>

代碼完成了兩個功能：1.輸入關鍵詞后按回車，會向server發送一個POST請求，然后異步提交表單，刷新部分頁面；2.輸入關鍵詞后，點擊查詢按鈕，也可異步刷新部分頁面。

此時要注意表單提交后發送的是POST請求，而點擊按鈕會發送一個GET請求，所以我們可以通過jQuery，使得按鈕點擊時觸發表單提交，這樣后端就不用再寫代碼處理GET請求。

四、隱藏的iframe模擬異步上傳

為什么在這里說的是模擬呢?因為我們其實是將返回結果放在了一個隱藏的iframe中，所以才沒有使當前頁面跳轉，感覺就像是異步操作一樣。

<!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> // 上傳完成后的回調 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>

這種技術有兩個關鍵的地方:

form會指定target,提交的結果定向返回到隱藏的ifram中。(即form的target與iframe的name屬性一致)。提交完成后，iframe中頁面與主頁面通信，通知上傳結果及服務端文件信息.

如何與主頁面通信呢? 　　我們用nodejs在接收完了文件后返回了一個window.parent.主頁面定義的方法，執行后可以得知文件上傳完成。代碼很簡單:

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("")); }, );});

五、使用xmlhttpRequest2來進行真正的異步上傳

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-"><title>xhr level 異步上傳</title><script type="text/javascript" src="jquery路徑..."></script></head><body><div> <p id="upfile"> 附件： <input type="file" id="myfile" style="display: inline"> </p> <p id="upbtn"> <input style="padding-left: px; padding-right: px;" type="button" value="異步上傳" onclick="upload();"> <span id="uptxt" style="display: none">正在上傳...</span> <span id="upprog"></span> <button id="stopbtn" style="display: none;">停止上傳</button> </p></div><div id="flist" style="border: px dotted darkgray;"></div><script>function upload() { // 準備FormData var fd = new FormData(); fd.append("myfile", $("#myfile")[0].files[0]); // 創建xhr對象 var xhr = new XMLHttpRequest(); // 監聽狀態，實時響應 // xhr 和 xhr.upload 都有progress事件，xhr.progress是下載進度，xhr.upload.progress是上傳進度 xhr.upload.onprogress = function(event) { if (event.lengthComputable) { var percent = Math.round(event.loaded / event.total); console.log('%d%', percent); $("#upprog").text(percent); } }; // 傳輸開始事件 xhr.onloadstart = function(event) { console.log('load start'); $("#upprog").text('開始上傳'); $("#stopbtn").one('click', function() { xhr.abort(); $(this).hide(); }); loading(true); }; // ajax過程成功完成事件 xhr.onload = function(event) { console.log('load success'); $("#upprog").text('上傳成功'); console.log(xhr.responseText); var ret = JSON.parse(xhr.responseText); addToFlist(ret.fname); }; // ajax過程發生錯誤事件 xhr.onerror = function(event) { console.log('error'); $("#upprog").text('發生錯誤'); }; // ajax被取消 xhr.onabort = function(event) { console.log('abort'); $("#upprog").text('操作被取消'); }; // loadend傳輸結束，不管成功失敗都會被觸發 xhr.onloadend = function (event) { console.log('load end'); loading(false); }; // 發起ajax請求傳送數據 xhr.open('POST', '/upload', true); xhr.send(fd);}function addToFlist(fname) { var temp = ["<p id='" + fname + "'>",fname,"<button onclick='delFile(/"" + fname + "/");'>刪除</button>","</p>"]; $("#flist").append(temp.join(""));}function delFile(fname) { console.log('to delete file: ' + fname); // TODO: 請實現}function loading(showloading) { if (showloading) { $("#uptxt").show(); $("#stopbtn").show(); } else { $("#uptxt").hide(); $("#stopbtn").hide(); }}</script></body></html>

　　代碼有點多，但是通俗易懂。使用過AJAX的人都知道，XHR對象提供了一個onreadystatechange的回調方法來監聽整個請求/響應過程。在XMLHttpRequest2級規范中又多了幾個進度事件。有以下6個事件: 　　1.loadstart: 在接收到響應數據的第一個字節時觸發。　　2.progress: 在接收響應期間持續不斷地觸發。　　3.error: 在請求發生錯誤時觸發。　　4.abort: 在因為調用abort()方法而終止連接時觸發。　　5.load: 在接收到完整的響應數據時觸發。　　6.loadend: 在通信完成或者觸發error,abort,load事件后觸發。　　　　這次我們可以解讀代碼:當傳輸事件開始后，我們便在停止傳送按鈕上添加點擊事件，內置了abort方法可以停止傳送。若不點則會正常上傳直到傳送完畢為止。其后臺代碼類似第二種方法。