AJAX 调用只工作一次

AJAX calls only working once

本文关键字：一次 调用 工作 AJAX      更新时间：2023-09-26

这是我的代码：

<script type="text/javascript">
    $(document).ready(function() {
      $('#username').change(check_username);
    });
    function check_username() {
      $("#check_username").html('<img src="images/site/ajax-loader.gif" />username avilable??').delay(5000);
      var usernametotest = $('#username').val();    
      $.post("backend/username_available.php", { username: usernametotest})
       .done(function(data) {
         $("#check_username").replaceWith(data);
       });
    }
</script>

我使用此代码与 AJACX 一起检查我的表单中用户名的可用性。它工作完美，但只有一次。当用户名被占用并且我更改用户名时，在第一个之后没有执行 AJAX 检查？文本"用户名已存在"（在变量数据中）不会替换为"用户名确定"。

此 JavaScript 是在 </html> 标记之前添加的。

您的代码看起来不错 - 请参阅此 jsfiddle ，其中包含有关 usernametotest 值的警报以提高可见性

$(document).ready(function() {
    $('#username').change(check_username);
});
function check_username(){
    $("#check_username").html('username avilable??').delay(5000);
    var usernametotest = $('#username').val();
    alert('posting username ' + usernametotest);
    $.post("backend/username_available.php", { username: usernametotest} )
        .done(function(data) {
            $("#check_username").replaceWith( data );
        });  
}

每次都会使用正确的有效负载发出发布请求，因此没有问题（检查浏览器开发人员工具，例如 Chrome 中的网络选项卡/XHR）

一定是从backend/username_available.php返回的响应有问题吗？检查第一个请求与其余请求的响应，差异和问题可能会跳出来。

每当您替换元素时...在这里，你就是这样做的...

$("#check_username").replaceWith( data );

所有这些元素的处理程序都将丢失。所以change()不再有效。为了能够再次使用它，您只需要在重写元素后再次绑定它：

$('#username').change(check_username);

或者将处理程序绑定到父处理程序并委托它：

$('#username').parent().on('click', '#username', check_username);

（我觉得类选择器会更好 - 称之为迷信）

你可以试试这个：

$('#username').on('change', function() {
  // write your code here
});
相关文章：