$(this).attr("name") 无法与 $.post一起使用

4

我在一个简单的表单上使用了这段代码。请问你能告诉我为什么这段代码有效吗?

$(document).ready(function(){

    $(":input").focus(function() {
        $(this).keyup(function(){
            if (this.value != this.lastValue) {
                $.post("ajax-validation.php", { "username" : $(this).val() },
                function(data){
                    $("#display").html(data);
                });
                this.lastValue = this.value;
            };
        });
    });

});

这个呢?

$(document).ready(function(){

    $(":input").focus(function() {
        $(this).keyup(function(){
            if (this.value != this.lastValue) {
                $.post("ajax-validation.php", { $(this).attr("name") : $(this).val() },
                function(data){
                    $("#display").html(data);
                });
                this.lastValue = this.value;
            };
        });
    });

});

这是一个非常奇怪的事情!!


你能同时发布你的HTML代码吗? - Michael Mior
我在想:如果将 { $(this).attr("name") : 改为 {'"'+ $(this).attr("name") +'"': 是否可行。 - Mark Schultheiss
@MarkSchultheiss 不起作用。 - Floppy88
3个回答

6
这并不正确。$(this)在你放置它的地方没有上下文。你需要将其缓存并重复使用。像这样:
$(document).ready(function() {

    $(":input").focus(function() {
        $(this).keyup(function() {
            var el = $(this), theName = el.attr("name"), data = {};
            data[theName] = el.val();
            if (this.value != this.lastValue) {
                
                $.post("ajax-validation.php", data , function(data) {
                    $("#display").html(data);
                });
                //console.log(el.attr("name"), el.val());
                this.lastValue = this.value;
            };
        });
    });

});

代码已更正!似乎不允许使用方法(即使返回字符串)。因此,我将它放在另一个变量中并在那里使用。 测试通过。(请使用开发工具或Firebug查看请求)

代码已再次更正!似乎$.post不喜欢变量(它将它们视为字符串),因此我在$.post方法外定义了数据对象,并将其传递进去。非常有效。

需要考虑的重要问题

  • 代码是正确的,但不是健壮的,这意味着,它会按照你在答案中要求的方式工作,但如果遭受攻击,它可能会以无尽的请求占满你的服务器。你应该:

    • setTimeout制作定时器(只有在3-4秒内没有编辑时)来限制请求速率。
    • 确保在服务器端安全,不要允许来自同一连接的多个请求。使用连接信息与全局计数器(保存在数据库或文本文件中)结合使用,以确定用户是否滥用您的系统,并进行阻止。
  • 我认为,你应该有一个验证按钮(或链接,或其他东西)来检查输入是否有效,而不是在按键时自动验证。


1
你应该在 el 前面加上 var,或者在其上方声明,这样它就不会成为全局变量。 - Dogbert
确实。这段代码不够健壮。如果遭受攻击,它会让你的服务器崩溃。我会在答案中添加解释。 - Madara's Ghost
1
@WeContest 嗯嗯嗯嗯嗯,非常有趣。似乎你不能直接将变量传递给 $.post。我已经纠正了我的代码并在本地测试过了。它会起作用的。 - Madara's Ghost
@Truth Epic!现在,请您解释一下为什么会发生这种情况,"data = {}" 和 "data[theName] = el.val()" 的含义是什么? - Floppy88
1
当然。我注意到你不能直接将变量传递给$.post,所以你需要构造一个对象(即data),并将其放在那里,然后将其传递给$.post - Madara's Ghost
显示剩余3条评论

2

替代

            $.post("ajax-validation.php", { $(this).attr("name") : $(this).val() },

尝试

            var hash = {};
            hash[$(this).attr("name")] = $(this).val();
            $.post("ajax-validation.php", hash,

-3

$(this).attr("name") 是一个对象,而不是你在帖子中提供的字符串。尝试使用 $(this).attr("name").value 或 $(this).attr("name").val(),我记不清哪个了,但其中一个应该适合你。


6
只是...错了...我很少给答案点踩,但你本该看到这个结果不对。 - Madara's Ghost
4
你从未使用过 jQuery,是吗?.attr().prop() 在用于获取值时都会返回一个普通值(attr 一直是字符串,prop 可能也是布尔类型和整数)。请注意,这里只涉及获取值的情况。 - ThiefMaster
我们竞赛,为什么在看到评论和踩后,你还要尝试他的建议? - aziz punjani
不需要这样,直接查看文档 http://api.jquery.com/attr/ 会节省你一些时间。 - aziz punjani

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接