場(chǎng)景

表單中有兩個(gè)輸入框input在提交這個(gè)表單前需要對(duì)兩個(gè)輸入框進(jìn)行校驗(yàn)。

即點(diǎn)擊提交按鈕時(shí)會(huì)經(jīng)過校驗(yàn)的方法，此方法會(huì)post方式提交到后臺(tái)，在請(qǐng)求后臺(tái)成功后的回調(diào)方法中會(huì)對(duì)js變量進(jìn)行賦值，進(jìn)而決定是否提交此表單。

$.post

默認(rèn)是異步提交，所謂異步提交就是在請(qǐng)求發(fā)出去之后，不管結(jié)果是否返回，都會(huì)執(zhí)行后面的代碼。

所以呀想把返回的結(jié)果或者根據(jù)返回結(jié)果給js變量賦值，那么就要使用同步請(qǐng)求。同步請(qǐng)求就是等請(qǐng)求結(jié)果返回后再執(zhí)行后面的代碼。

因?yàn)槟J(rèn)是異步請(qǐng)求，所以修改為同步請(qǐng)求的方式為：

async:false,

添加如上屬性。

實(shí)現(xiàn)

form表單代碼：

<form id="inAirportForm" action="${ctx}/frontPage/passFlight/GJbook.html" method="post" class="plug_form dis_none"? onsubmit="return inAirportCheck(this)"><button class="btn_max wm_94 bg_title c_white mt_1em h_36em"type="submit"><spring:message code="search" /></button><buttonclass="btn_max wm_94 border bor_title bg_white c_title mt_1em h_36em"type="reset"><spring:message code="reselection" /></button>?</div> </form>

中間input框代碼省掉。

js驗(yàn)證方法代碼

function inAirportCheck(that) {var guojiStrart = $(".plug_airport3 ").val();var guojiEnd = $(".plug_airport4").val();debuggervar formAction = "${ctx}/frontPage/passAddrAirport/validateIsGuoNeiAll";var validateIsGuoNeiAll = false;$.post({async:false,url: formAction,cache: false,? //禁用緩存data:JSON.stringify({"guojiStrart":guojiStrart,"guojiEnd":guojiEnd}),contentType: "application/json",dataType: "json",success: function (result) {debuggerif ("300" == result.statusCode) {$ak.alert(result.message, { //(微信平臺(tái)的H5使用方法 $ak.alert)title: "信息提示",//彈窗標(biāo)題button_ok: "確定",button_cancel: "取消",icon: "error", //圖標(biāo)類型（warning，error，info，question，success）animateIn: "bounceInDown",//彈窗顯示效果animateOut: "bounceOutUp"});validateIsGuoNeiAll = false;}if("200" == result.statusCode){validateIsGuoNeiAll = true;}}});return ???validateIsGuoNeiAll; }

如上代碼是設(shè)置為同步之后的代碼，如果不加async:false,< BR> 則后臺(tái)還沒走完驗(yàn)證，表單已經(jīng)提交。

總結(jié)

以上是生活随笔為你收集整理的Jquery中进行post请求时同步与异步的区别（从实例入手学习）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。