2012-02-23 121 views
9

不工作我有更新用戶信息的Web窗體,當他更新他的電子郵件是通過ajax()進行驗證,這樣,如果新的電子郵件地址已被其他用戶使用,他被警告。返回FALSE內jQuery.ajax

我試圖取消表單提交當電子郵件被使用,但return false;不起作用。

其他任何return false; if語句都工作正常,問題是隻有在這個裏面調用jQuery.ajax()

下面是實際的代碼:

var email = jQuery('#email').val(); 
jQuery.ajax({ 
    type : 'GET', 
    url : '/ajax/verify-email.php?email=' + email, 
    success : function(d) { 
     if(d == '1') { 
      alert('Another user is using this email'); 
      jQuery('input[name="email"]').focus(); 
      return false; // this guy over here is not working!!!! 
     } 
    } 
}); 

有沒有人有辦法解決嗎?

+0

爲什麼你需要它返回false?這是否可以幫助某人回答問題的更大代碼塊的一部分? – shanabus 2012-02-23 22:16:26

+2

你會期望它在那裏做什麼?可能它應該在別的地方阻止表單提交 – aletzo 2012-02-23 22:17:57

回答

19

AJAX中的A實際上非常重要。它代表異步。這意味着你觸發了一個請求到服務器,這可能需要一些時間來處理,你稍後會得到一個響應。這個響應發生在成功回調中。但是由於這種情況比實際的表單提交晚得多,因此您的表單實際上在響應回來之前已經提交。因此,從AJAX成功回調中返回false是毫無意義的。你想要做的是從表單的提交處理程序返回false。讓我們看看我們如何實現這一點。

你可以訂閱.submit處理形式,併發送一個AJAX請求,以驗證是否符合email已經採取或不和,如果它沒有手動拍攝觸發提交成功AJAX的回調裏面的形式:

$('form').submit(function() { 
    // we send an AJAX request to validate the unicity of the email 
    $.ajax({ 
     url: '/ajax/verify-email.php', 
     type: 'POST', 
     data: { email: $('#email').val() }, 
     // we set the context to the form so that inside 
     // the success callback 'this' points to the form 
     context: this, 
     success: function(result) { 
      if (result != '1') { 
       // If the server send something different than 1 
       // we know that the email is unique and trigger 
       // the submission of the form using the underlying 
       // DOM element to avoid calling the .submit handler 
       // recusrively 
       this.submit(); 
      } else { 
       // The email is not unique => we are informing 
       // the user that the email is already in use 
       alert('Another user is using this email'); 
       $('#email').focus(); 
      } 
     } 
    }); 

    // we cancel the normal submission of the form  
    return false; 
}); 

而且從不依靠客戶端驗證。表單成功提交到服務器後,請確保您正在執行email is unique檢查。如果您使用的SQL數據庫很容易在您的電子郵件字段中使用唯一的約束條件來實現。

+0

如果直接調用表單的提交功能,則可以完全避免「proceed」標誌;調用'HTMLFormElement#submit'不會觸發提交處理程序。但請注意,這裏存在競爭狀況。用戶可以在ajax調用正在運行時更改電子郵件*,從而導致發送已更改(並且未選中)的電子郵件。 (順便說一句,你在一個地方使用'proceed',在另一個地方使用'process'。) – 2012-02-23 22:25:59

+0

@ T.J.Crowder,關於使用實際DOM元素提交表單的好建議。將更新我的答案。另外感謝您注意'proceed'和''process'數據屬性。就競爭條件而言,好吧,這就是爲什麼絕對不應該依賴客戶端驗證並確保在服務器上執行此驗證的原因。 – 2012-02-23 22:29:08

+0

'@ Darin':其中很多*原因之一,是的。 :-) – 2012-02-23 22:30:09

0

您在此處運行異步代碼。目前你試圖回報虛假,這遠遠遲到了。您的功能已經返回undefined。如果要處理成功的結果,則需要提供回調。

-1

似乎你不會真正得到jQuery的想法。你不需要使用return false,而不需要。您可以撥打event.preventDefault();

$('#form').submit(function(event) { 
    $.get('/ajax/verify-email.php?email=' + $('#email').val(), function(d) { 
     if (d == '1') { 
      alert('Another user is using this email'); 
      $('#email').focus(); 
     } 
    }); 

    event.preventDefault(); 
}); 

this example

+1

這不是問題。他試圖在異步函數中返回一個值^^ – Christoph 2012-02-23 22:21:39

+0

我在jquery ajax中嘗試了async false,但它沒有起作用4 – 2012-04-01 04:00:35

+0

我在答案中添加了JSFiddle的代碼。 – 2017-03-08 11:27:00

0

你應該使用event.preventDefault(),如下圖所示。

$('#form').submit(function(event) { 
    $.get('/ajax/verify-email.php?email=' + $('#email').val(), function(d) { 
     if (d == '1') { 
      alert('Another user is using this email'); 
      $('#email').focus(); 
      event.preventDefault(); 
     } 
    }); 
}); 
0

您不應該在這種情況下使用.submit(),使用標誌系統,而是應該.submit()僅用於<form>元素。

var email = jQuery('#email').val(); 
var flag = 0; 
jQuery.ajax({ 
    type : 'GET', 
    url : '/ajax/verify-email.php?email=' + email, 
    async: false, 
    success : function(d) { 
     if(d == '1') { 
      alert('Another user is using this email'); 
      jQuery('input[name="email"]').focus(); 
      flag = 1; 
     } 
    } 
}); 
if(flag == 1) return false;