javascript 每次表单输入字段更改时，您如何发送ajax请求？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16627964/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you send an ajax request every time that a form input field changes?
提问by ordinary
For example, there is an input field. Every time a user types a key into that field, it sends an AJAX request with whatever text is currently in that input, and does something with it. I've looked into the change and keyup functions in Jquery, but when I try them in Jsfiddle they don't do anything. Is there a standard way of doing this type of operation? I know its common for validations and stuff.
例如，有一个输入字段。每次用户在该字段中键入一个键时，它都会发送一个带有该输入中当前文本的 AJAX 请求，并对其进行处理。我已经研究了 Jquery 中的更改和 keyup 函数，但是当我在 Jsfiddle 中尝试它们时，它们什么也没做。是否有进行此类操作的标准方法？我知道它对于验证和其他东西很常见。
<form>
<input id="test" type='text' >
<input type="submit" value="asdf">
</form>
$('input').on("change",(function(e){
alert("Hello");
});
The effect I am going for is like this game www.sporcle.com/games/g/nflteams#
我想要的效果就像这个游戏 www.sporcle.com/games/g/nflteams#
You can type in any text and if its within the set of correct answers then the table will update to show that answer. You never have to submit. How do you suppose they achieved this effect?
您可以输入任何文本，如果它在正确答案的范围内，则表格将更新以显示该答案。你永远不必提交。你认为他们是如何达到这种效果的？
It seemed to me like they must be querying the database every time a user enters a key, to see if it is a correct answer. If it is they update the table to display the answer. What are other ways to do this?
在我看来，每次用户输入密钥时，他们都必须查询数据库，以查看它是否是正确答案。如果是，他们会更新表格以显示答案。还有什么其他方法可以做到这一点？
回答by r043v
sending a request on each change is just bad, delay the ajax on the last change
在每次更改时发送请求很糟糕，在最后一次更改时延迟 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);
});
回答by Dylan Hayes
I'd probably do something similar to this. you'd have to add some extra code to handle dropdowns, but the idea is the same.
我可能会做类似的事情。您必须添加一些额外的代码来处理下拉列表，但想法是相同的。
$('form input').keyup(function () {
$.ajax({
type: "POST",
url: url,
data: data,
success: success,
dataType: dataType
});
});
回答by Daniel Kmak
$('#yourInputId').keyup (function () {
$.post('http://yoururl.com', { value: $(this).val() }).done(function (data) {
$('#feedbackDivId').html(data);
});
});
回答by Ben Carey
Just make an $.ajax()call every time the change event is fired! Like so:
$.ajax()每次触发更改事件时只需拨打电话！像这样：
$(document).on('keydown','input',function(){
$.ajax({
// options here
});
});
Whilst the above will help achieve what you want, I must advise that it is not great practice to fire off constant AJAX requests as this can put a huge load on the server if you have a lot of traffic. You would be better off either validating every n seconds, or validating client side, or validating on submission...
虽然上述内容将有助于实现您想要的，但我必须建议，发出持续的 AJAX 请求并不是很好的做法，因为如果您有大量流量，这会给服务器带来巨大的负载。您最好每 n 秒验证一次，或验证客户端，或在提交时验证...
UPDATE
更新
It appears you do not want to catch the changeevent, you would like to know when anything is entered. Resultantly, I have changed my code to catch the keydownevent. This will fire whenever a key is pressed down whilst focused on an input.
看起来您不想捕捉change事件，您想知道何时输入任何内容。结果，我更改了代码以捕获keydown事件。每当在专注于输入时按下一个键，这就会触发。
