Ajax异步获取和按键功能
Posted
技术标签:
【中文标题】Ajax异步获取和按键功能【英文标题】：Ajax async get and key press function 【发布时间】：2013-01-01 08:38:29 【问题描述】：我需要根据表单文本输入字段上的信息输入来填充选择列表。我弄清楚了 Ajax 部分，但它没有按预期工作。这个想法是当用户在名字字段中输入时，选择列表将填充适当的选项。该函数确实有效，但 var firstname = $("#fn").val(); call 将始终返回比字段中键入的内容少一个字符。 任何帮助将不胜感激！
下面是相关的html和代码：
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function()
$("#fn").keypress(function()
var firstname = $("#fn").val();
$.get("CustomerList", FirstName: firstname, function(responseText)
$("#div1").text(responseText);
);
);
);
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Show all names</title>
</head>
<body>
<form method="GET" action='Controller' name="CreateNTF" >
<table>
<tr>
<td>Create User:</td>
<td><input id="fn" type="text" name="FirstName" /></td>
<td><input id="ln" type="text" name="LastName"/></td>
</tr>
<tr>
<td>Carrier</td>
<td>
<span id="div1"></span>
</td>
</tr>
</table>
<input type="submit" name="submit" value="Submit" onClick="return validateForm();"/>
</form>
</body>
</html>
【问题讨论】：
【参考方案1】：尝试使用keyup 而不是keypress。也许keypress 触发得太早，无法让.val() 识别文本更改。
另一种解决方案是自己计算最终的字符串：
$("#fn").keypress(function(e)
var firstname = $("#fn").val() + String.fromCharCode(e.which);
$.get("CustomerList", FirstName: firstname, function(responseText)
$("#div1").text(responseText);
);
);
不过最后this guy好像和你有同样的问题，建议的解决方法也一样。
【讨论】：
在评估 .val() 之前，我已经尝试了所有方法，甚至使用了 setTimeout("",1000)。 刚刚为我的答案添加了另一个解决方案。 毕竟，keyup 事件确实有效，我不知道为什么它在第一次没有工作。感谢他重播【参考方案2】：使用 keyup 和 keypress，您将触发每个字符的 AJAX 调用。 我认为您可能想要使用 change 事件，该事件将在输入框失去焦点时触发 ajax 调用，这是在用户完成输入并从输入框出来之后。这样，您将拥有完整的输入字符串并避免不必要的 ajax 调用。
【讨论】：
感谢您的回复。我知道我可以使用更改事件，但是有一个特定的要求来跟踪用户的按键输入。因此我不能使用更改事件。以上是关于Ajax异步获取和按键功能的主要内容，如果未能解决你的问题，请参考以下文章
在 rails 3.2.2 中使用 $.ajax() 异步获取数据