表單提交前onclick使用reuturn時,ajax請求同步非同步的一點注意事項
阿新 • • 發佈:2019-02-19
因為會經常用到ajax提交請求判斷一些資訊,比如,使用者賬號名是否存在等等,但如果是在提交表單資料按鈕的onclick時,用return check()來跳轉去最後驗證一下表單資料是否為空等等。需要注意一些問題。
當進行ajax請求時,如果success回撥得到的結果是錯誤的,使用return false是沒有辦法返回check()函式false結果的,因為你在回撥函式裡,只是返回在裡層的函式。於是會發現表單照樣提交。比如:
function check(){
$name = $("#name").val();
$.post("check.php",{name:name},function (data){
data = JSON.parse(data);
if(data.code != 200){
return false;
}
});
}
上面的程式碼return false只是跳出ajax請求函式而已,並沒有給check函式任何返回。
於是會想到使用臨時標記變數去判斷識別:例如
function check(){
$name = $("#name").val();
$flag = 0;
$.post("check.php",{name:name},function(data) {
data = JSON.parse(data);
if(data.code != 200){
return false;
}else{
flag = 1;
return true;
}
});
if(flag === 0){
return false;
}
return true;
}
可是這樣再試,你會發現表單是不進行提交了,但是你回撥資料判斷正確時,你卻怎麼也提交不了表單!這時可以在flag判斷前列印flag的值console.log(flag),發現flag=0,而不是1。
然後你仔細觀察會發現在命令列裡,flag的值的列印時間比ajax請求完成時間更早,這是因為 $.get/post函式預設使用的是非同步通訊。當請求時,會相別於主執行緒,再開始一個執行緒用於ajax請求,兩個執行緒同時進行。
因此在這種情況下,你需要使用同步通訊,只能使用$.ajax函式進行ajax請求
$.ajax({
url: "check.php",
type: "POST",
async: false, //同步請求
data: {name:name},
success: function(data){
data = JSON.parse(data);
if(data.code != 200){
return false;
}else{
flag = 1;
return true;
}
}
});