每当表单输入字段更改时如何发送Ajax请求？

Question

例如，有一个输入框。每当用户在该字段中键入一个键时，它都会发送一个包含当前输入文本的AJAX请求，并对其进行处理。我已经研究了Jquery中的change和keyup函数，但是当我在Jsfiddle中尝试它们时，它们没有任何反应。是否有一种标准的方法来执行这种类型的操作？我知道这对于验证等操作很常见。

<form>
    <input id="test" type='text' >
    <input type="submit" value="asdf">
</form>

$('input').on("change",(function(e){
    alert("Hello");
});

我想要实现的效果类似于这个游戏 www.sporcle.com/games/g/nflteams#。

如果输入的文本是正确答案之一，表格会更新以显示该答案。您永远不需要提交。您认为他们是如何实现这种效果的？

我觉得他们每次用户输入键时都必须查询数据库，以查看它是否是正确答案。 如果是，则更新表格以显示答案。 还有其他方法可以做到这一点吗？

- ordinary

---

你具体尝试了什么？ - Jon

keyup 应该有效。代码？ - Klas Mellbourn

是的，你尝试了什么？jsfiddle不是测试与服务器进行ajax调用的最佳场所。 - Arpit Singh

我没有尝试过ajax调用，我只是尝试使用jquery事件来查看它是否实际触发。我会编辑并附上代码。 - ordinary

Answer 1

在每个更改时发送请求是不好的，延迟最后一次更改时的Ajax请求。

var changeTimer = false;

$("your inputs").on("your change event",function(){
        if(changeTimer !== false) clearTimeout(changeTimer);
        changeTimer = setTimeout(function(){
            /* your ajax here */
            changeTimer = false;
        },300);
});

- r043v

---

优秀的解决方案。谢谢。 - w3spi

或者，可以考虑使用jquery-debounce或underscore的防抖函数。这很简单，您不需要将underscore作为依赖项添加，只需修改其中一些underscore函数的方法即可。http://underscorejs.org/docs/underscore.html#section-83 - sp89

Answer 2

我可能会做类似这样的事情。 你需要添加一些额外的代码来处理下拉菜单，但思路是相同的。

$('form input').keyup(function () {
    $.ajax({
      type: "POST",
      url: url,
      data: data,
      success: success,
      dataType: dataType
    });
});

- Dylan Hayes

---

如果是keyup事件，则+1，因为它会返回最近的值。而keypress()则会使你落后一个字符。 - rGil

好的，谢谢。我在自己的项目中使用keyup，只是忘记了 :) - Dylan Hayes

@DylanHayes 这不是最好的方法，这是真的吗？如果不能扩展，这样做行不通吗？如果是这样，那么有什么更好的验证方式呢？ - ordinary

这取决于你想做什么。我从未在使用此类型的验证时遇到过问题。像amazon.com上的主搜索框一样，自动完成文本框使用相同的逻辑来获取它“认为”你正在输入的内容。如果您想进行一次性验证，您可以始终将其缩小到“更改”事件上进行验证，但我从未需要缩小规模。 - Dylan Hayes

Answer 3

每次触发更改事件时，只需进行$.ajax()调用即可！就像这样：

$(document).on('keydown','input',function(){
    $.ajax({
        // options here
    });
});

虽然上述方法可以帮助您实现所需的功能，但我必须提醒您，频繁发送AJAX请求并不是一个好的做法，因为如果您有大量流量，这可能会对服务器造成巨大的负载。您最好每n秒验证一次，或在客户端验证，或在提交时进行验证...

更新

看起来您不想捕获“change”事件，而是想知道何时输入任何内容。因此，我已更改我的代码以捕获“keydown”事件。这将在焦点集中在输入框上时按下任何键时触发。

- Ben Carey

---

我想要的效果就像这个游戏http://www.sporcle.com/games/g/nflteams#您可以输入任何文本，如果它在正确答案集之内，则表格将更新以显示该答案。您永远不需要提交。您认为他们是如何实现这种效果的？ - ordinary

你的代码并没有实现用户所要求的功能，它只会在变化时触发。无论是否可取，这都不是回答问题的方式。 - Dylan Hayes

@DylanHayes 说得对，我已经修改了我的代码来捕获“keydown”事件。 - Ben Carey

但是这里的真正问题是不断的Ajax调用，+1表示指出了这一点。 - r043v

Answer 4

$('#yourInputId').keyup (function () {
    $.post('http://yoururl.com', { value: $(this).val() }).done(function (data) {
        $('#feedbackDivId').html(data);
    });
});

- Daniel Kmak

---

请缩进并翻译以下与编程有关的内容：请注意， .html(done) 会出现错误，请尝试使用 .html(data)。 - r043v