jQuery AJAX比訪問DOM元素要慢

我想檢查用戶名是否可用於AJAX和jQuery。jQuery AJAX比訪問DOM元素要慢

這是註冊輸入字段

 <tr> 
      <td><input type = "text" id ="new_username"/></td> 
     </tr> 
     <tr> 
     <td></td> 
     <td id ="information"></td> 
    </tr> 
    <input type = "submit" id = "sign-up" value = "Sign up" />

這裏是jQuery的部分與阿賈克斯

(function($){ 
$(document).ready(function(){ 
    $('#new_username').blur(function() { 
     var newUsername = $(this).val(); 

     $.post('../registration/check-username.php', 
      { 
       newUsername : newUsername 
      }, function (data) { 
       $('#information').html(data); 
      } 
     ); 
    }); 

    if($("#information").html() != "") { 
     $("#sign-up").attr('disabled', 'disabled'); 
    } else { 
     $("#sign-up").removeAttr("disabled"); 
    }  
}); 
})(jQuery);

如果有任何問題 - 「信息」 TD得到了一些錯誤信息。如果用戶名是免費的，它是空的，沒有任何通知。問題是ajax需要一些響應，而且點擊某處會更快 - 這會導致檢查不正確。任何想法，如果你明白我的問題？

來源

2013-05-01 Bor

..你可能想嘗試並重新clarrify ...如果jQuery是緩慢和你想要的東西更快的JavaScript將提高速度稍如果我不明白你問的 – brendosthoughts 2013-05-01 07:44:49

的問題是如何首先等待ajax響應，然後回答 – Bor 2013-05-01 08:01:03

這是因爲$.post是一個異步請求，意味着一旦請求被髮送到服務器來驗證腳本執行將繼續的用戶名。在你的情況下，這意味着if條件將在服務器響應之前得到執行，所以解決方案是在回調方法內移動if條件。

而且最好是使用.prop()方法來修改disabled屬性

嘗試

(function($){ 
    $(document).ready(function(){ 
     $('#new_username').blur(function() { 
      var newUsername = $(this).val(); 

      $.post('../registration/check-username.php', 
        { 
         newUsername : newUsername 
        }, function (data) { 
         $('#information').html(data); 

         $("#sign-up").prop('disabled', data != ""); 
        } 
       ); 
     });   
    }); 
})(jQuery);

來源

2013-05-01 07:45:31

我明確錯誤地解釋了這個問題，如果這是正確的答案 - 我認爲問題是提交沒有被禁用，直到AJAX響應發生。 – 2013-05-01 09:07:01

@RyanBrodie如果你看看代碼，他試圖禁用基於'＃information'元素的內容，該元素由ajax調用 – 2013-05-01 09:24:06

填充內容我明白了，但假設他會想要在*期間禁用該按鈕*請求防止意外表單提交，從而解釋我在回答中使用'beforeSend'方法。不用擔心。 – 2013-05-01 10:29:15

你是對的，你需要等待Ajax響應回來。在完全不重構代碼的情況下，只需在響應返回時進行檢查。你說得對，你需要等待AJAX響應回來。在完全不重構代碼的情況下，只需在響應返回時進行檢查。

$.post('../registration/check-username.php', 
    { 
    newUsername : newUsername 
    }, function (data) { 
    $('#information').html(data); 
    }).done(function(){ 
    if($("#information").html() != "") { 
     $("#sign-up").attr('disabled', 'disabled'); 
    } else { 
     $("#sign-up").removeAttr("disabled"); 
    } 
    });

來源

2013-05-01 07:49:26 Sinetheta

我認爲「它的速度更快只需點擊某處」你指的是用戶能夠點擊提交輸入已經被驗證了。使用$.ajax()beforeSend方法來解決這個問題：

$(document).ready(function(){ 
    $('#new_username').blur(function() { 
    $.ajax({ 
     url: "../registration/check-username.php", 
     data: { 
     newUsername: $(this).val() 
     }, 
     beforeSend: function() { 
     $("#sign-up").attr("disabled","disabled"); 
     }, 
     success: function(data) { 
     $('#information').html(data); 
     if(!data) 
      $("#sign-up").removeAttr("disabled"); 
     } 
    }); 
    }); 
});

來源

2013-05-01 07:51:13

jQuery AJAX比訪問DOM元素要慢

回答

相關問題