国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁(yè) > 網(wǎng)站 > WEB開發(fā) > 正文

異步提交表單的6種方式

2024-04-27 15:06:41
字體:
來(lái)源:轉(zhuǎn)載
供稿:網(wǎng)友

在學(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”: 返回純文本字符串

一、Ajax方式

<script type="text/javaScript">   $.ajax({ url:"mobileSurveyAction_addSurvey.action",//提交地址 data:$("#form1").serialize(),//將表單數(shù)據(jù)序列化 type:"POST", dataType:"json", success:function(result){ if (result.success == '100'){ $("#mySection").hide(); $(".footer").hide(); $("#alertMsg").show(); }else{ alert("失敗!"); } } });</script>

二、submit方式

有時(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>

三、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="請(qǐng)輸入搜索關(guān)鍵詞" 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>

代碼完成了兩個(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)求。

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

為什么在這里說(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("")); }, );});

五、使用xmlhttpRequest2來(lái)進(jìn)行真正的異步上傳

<!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() { // 準(zhǔn)備FormData var fd = new FormData(); fd.append("myfile", $("#myfile")[0].files[0]); // 創(chuàng)建xhr對(duì)象 var xhr = new XMLHttpRequest(); // 監(jiān)聽狀態(tài),實(shí)時(shí)響應(yīng) // xhr 和 xhr.upload 都有progress事件,xhr.progress是下載進(jìn)度,xhr.upload.progress是上傳進(jìn)度 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過(guò)程成功完成事件 xhr.onload = function(event) { console.log('load success'); $("#upprog").text('上傳成功'); console.log(xhr.responseText); var ret = JSON.parse(xhr.responseText); addToFlist(ret.fname); }; // ajax過(guò)程發(fā)生錯(cuò)誤事件 xhr.onerror = function(event) { console.log('error'); $("#upprog").text('發(fā)生錯(cuò)誤'); }; // ajax被取消 xhr.onabort = function(event) { console.log('abort'); $("#upprog").text('操作被取消'); }; // loadend傳輸結(jié)束,不管成功失敗都會(huì)被觸發(fā) xhr.onloadend = function (event) { console.log('load end'); loading(false); }; // 發(fā)起ajax請(qǐng)求傳送數(shù)據(jù) 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: 請(qǐng)實(shí)現(xiàn)}function loading(showloading) { if (showloading) { $("#uptxt").show(); $("#stopbtn").show(); } else { $("#uptxt").hide(); $("#stopbtn").hide(); }}</script></body></html>

  代碼有點(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)代碼類似第二種方法。

六、使用jQuery和FormData來(lái)進(jìn)行異步上傳

此部分請(qǐng)參看FormData的詳細(xì)介紹及使用


發(fā)表評(píng)論 共有條評(píng)論
用戶名: 密碼:
驗(yàn)證碼: 匿名發(fā)表
主站蜘蛛池模板: 昔阳县| 陵水| 滁州市| 阿巴嘎旗| 翁牛特旗| 通海县| 阿合奇县| 锡林郭勒盟| 南雄市| 云龙县| 潢川县| 古蔺县| 囊谦县| 钟祥市| 宣武区| 武宣县| 图木舒克市| 颍上县| 于田县| 长武县| 达州市| 建昌县| 巍山| 桑日县| 景德镇市| 云浮市| 洛阳市| 松江区| 大洼县| 楚雄市| 蒙山县| 元江| 象山县| 和田县| 寿阳县| 安陆市| 宁化县| 土默特右旗| 东至县| 峡江县| 融水|