淺析onsubmit校驗(yàn)表單時(shí)利用ajax的return false無效問題
更新時(shí)間：2013年07月10日 11:29:19 作者：
前幾天，在校驗(yàn)一個(gè)表單數(shù)據(jù)用到ajax時(shí)，遇到 return false 無效問題,以下就是對這個(gè)問題進(jìn)行了分析介紹，需要的朋友可以參考下
復(fù)制代碼 代碼如下:
/**
* 表單提交校驗(yàn)
**/
function onSubmit(){
if($('#name').val().length<2){
alert("名稱請不少于兩個(gè)漢字");
return false;
}
var t = new Date().getTime();
$.ajax({
type: "POST",
url: "/users/checkrepeat/",
data: "name=" + $('#name').val() + "&time=" + t,
success:function(res){
if(res == 'exists'){
alert("名稱已存在，請修改.");
return false;
}
}
});
}
問題原因：
1. ajax時(shí)return false 的function與onsubmit()不是同一個(gè)函數(shù);
2. 在ajax執(zhí)行時(shí)，async默認(rèn)的設(shè)置值為true，這種情況為異步方式，就是說當(dāng)ajax發(fā)送請求后，在等待server端返回的這個(gè)過程中，前臺會繼續(xù) 執(zhí)行ajax塊后面的腳本，直到server端返回正確的結(jié)果才會去執(zhí)行success，也就是說這時(shí)候執(zhí)行的是兩個(gè)線程，ajax塊發(fā)出請求后一個(gè)線程 和ajax塊后面的腳本（另一個(gè)線程）。
修改后的代碼：
復(fù)制代碼 代碼如下:
/**
* 表單提交校驗(yàn)
**/
function onSubmit(){
if($('#name').val().length<2){
alert("名稱請不少于兩個(gè)漢字");
return false;
}
var flag = true;
var t = new Date().getTime();
$.ajax({
type: "POST",
async:false, // 設(shè)置同步方式
cache:false,
url: "/users/checkrepeat/",
data: "name=" + $('#name').val() + "&time=" + t,
success:function(res){
if(res == 'exists'){
alert("名稱已存在，請修改.");
flag = false;
}
}
});
if(!flag)
return false;
相關(guān)文章
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發(fā)更加快捷。這篇文章主要介紹了Bootstrap的核心——柵格系統(tǒng)的使用,需要的朋友可以參考下2017-10-10
基于Jquery實(shí)現(xiàn)焦點(diǎn)圖淡出淡入效果
這篇文章主要介紹了基于Jquery實(shí)現(xiàn)焦點(diǎn)圖淡出淡入效果，需要的朋友可以參考下2015-11-11
實(shí)例詳解jQuery結(jié)合GridView控件的使用方法
這篇文章主要以實(shí)例的方式詳細(xì)介紹了jQuery結(jié)合GridView控件的使用方法，感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要介紹了EasyUI中在表單提交之前進(jìn)行驗(yàn)證的相關(guān)資料,非常不錯，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-07
jQuery基礎(chǔ)框架:原型模式結(jié)構(gòu)、返回選擇器實(shí)例、訪問原型方法、自執(zhí)行匿名函數(shù)詳細(xì)介紹，需要了解的朋友可以參考下2012-12-12
基于Jquery代碼實(shí)現(xiàn)手風(fēng)琴菜單
這篇文章主要介紹了基于Jquery代碼實(shí)現(xiàn)手風(fēng)琴菜單，代碼簡單易懂，需要的朋友參考下2015-11-11
使用jQuery實(shí)現(xiàn)dropdownlist的聯(lián)動效果(sharepoint 2007)
在sharepoint 2007網(wǎng)站中，使用jQuery實(shí)現(xiàn)dropdownlist的聯(lián)動效果.2011-03-03
jQuery插件echarts設(shè)置折線圖中折線線條顏色和折線點(diǎn)顏色的方法
這篇文章主要介紹了jQuery插件echarts設(shè)置折線圖中折線線條顏色和折線點(diǎn)顏色的方法,結(jié)合實(shí)例形式分析了jQuery圖表插件echarts設(shè)置折線圖的相關(guān)操作技巧,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了jQuery找出網(wǎng)頁上最高元素的方法,實(shí)例分析了jQuery遍歷元素與獲取元素高度的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)文章收起與展開功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08