Ajax的大问题.我想不通 - big Ajax problem .. can't figure it out

big Ajax problem .. can't figure it out

本文关键字：想不通大问题 Ajax | 更新日期: 2023-09-27

唉，

我有一个使用ajax的实时用户名验证:

<td id="user_process_live"><input type="text" id="user_live_ver" name="user" /></td>

和以下Java:

  $("input#user_live_ver").blur(function() {
    var username=$(this).val();
    var dataString = 'username=' + username;
    $.ajax({
        type: "POST",
        url: "ajax/login_ajax.php",
        data: dataString,
        cache: false,
        success: function(html) {
           $("td#user_process_live").html(html); 
        }
        });
    });

login_ajax.php返回相同的<input type=text id=user_live_ver name=user />，但应用了不同的样式(background-color和border-color):如果用户名已经存在，则为红色，如果用户不存在，则为绿色…

问题是脚本只做了一次…只有一个.blur()…

如果我删除.ajax({ ... etc });并插入alert(dataString);每次我点击输入触发alert()，但.ajax()不一样…

有什么问题吗?谢谢大家

问题是您在第一个ajax请求返回后替换输入，因此您的模糊事件不再被绑定。尝试使用委托来绑定您的事件:

var process_live = $("#user_process_live");
process_live.delegate("#user_live_ver", "blur", function() {
    var username = $(this).val(),
        dataString = {'username': username};
    $.ajax({
        type: "POST",
        url: "ajax/login_ajax.php",
        data: dataString,
        cache: false,
        success: function(html) {
           process_live.html(html); 
        }
    });
});

当您将html字符串与success函数一起添加时，您将失去与输入元素附加的事件处理程序。

也许可以试着根据你在成功函数中得到的结果来改变输入的样式，而不是完全替换HTML。

success: function(result) {
   if (result) {
     $("input#user_live_ver").addClass("valid");
   } else {
     $("input#user_live_ver").addClass("invalid");
   } 
}

所有你的PHP脚本现在必须做的是返回true如果用户名是有效的，false如果不是。

使用json_encode($result)

也许在html替换后，模糊事件的参考丢失了，我不尝试，所以我不知道。

但是您是否尝试再次设置模糊事件?

这可能是因为您删除了$("input#user_live_ver")引用的元素，然后向DOM添加了一个新元素，因此blur事件绑定消失了。

你有两个选择:

使用.live()绑定事件，以便它也绑定到未来匹配的元素。更多信息在这里。

java*SCRIPT*…它们是非常不同的东西!而且，与其返回输入，为什么不返回成功或失败消息并相应地更新类呢?节省一些DOM调用