1. 程式人生 > >表單提交前onclick使用reuturn時,ajax請求同步非同步的一點注意事項

表單提交前onclick使用reuturn時,ajax請求同步非同步的一點注意事項

因為會經常用到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;
        }
    }
});