如何在每次表单输入字段更改时发送ajax请求?

How do you send an ajax request every time that a form input field changes?

本文关键字：ajax 请求 字段 输入 表单      更新时间：2023-09-26

例如，有一个输入字段。每次用户在该字段中键入一个键时，它都会发送一个带有该输入中当前文本的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#

您可以键入任何文本，如果它在正确答案集内，则表将更新以显示该答案。你永远不需要屈服。你认为他们是如何达到这种效果的?

在我看来，他们一定是在每次用户输入一个键时查询数据库，看看它是否是正确的答案。如果是，则更新表以显示答案。还有其他的方法吗?

每次更改都发送请求是不好的，延迟最后更改的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);
});

我可能会做类似的事情。您必须添加一些额外的代码来处理下拉菜单，但思路是一样的。

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

只需在每次触发更改事件时调用$.ajax() !像这样:

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

虽然上面的方法可以帮助实现您想要的效果，但是我必须建议，如果您有大量的流量，那么发出持续的AJAX请求并不是很好的做法，因为这会给服务器带来巨大的负载。您最好每n秒验证一次，或者验证客户端，或者在提交时验证……

似乎您不想捕获change事件，您想知道何时输入了任何内容。因此，我更改了代码以捕获keydown事件。

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