如何在不重新加载页面的情况下从文本字段值执行查找并填充表单元素？答案

【问题标题】：How to perform lookup from textfield value and populate form elements without reloading page?如何在不重新加载页面的情况下从文本字段值执行查找并填充表单元素？
【发布时间】：2013-11-16 18:46:13
【问题描述】：

我有一个非常简单的表单，它有一个名为CustomerNumber 的文本字段。表单中还有其他元素，例如选择和列表，需要包含与CustomerNumber 相关的值。

我想做的就是：

用户在CustomerNumber 文本字段中输入一个值，然后“跳出”或单击页面上的其他位置
然后应将在 CustomerNumber 中输入的值传递给数据库查询，该查询将返回基于 CustomerNumber 值的结果（例如客户以前的订单）
数据库查询的结果用于填充其他表单元素
最后，一旦用户正确填写了表单，他们会将整个表单（包括 CustomerNumber）提交到服务器进行处理

我只是看了一眼 JQuery 并尝试了一些简单的 DOM 操作（例如paragraph.text("new value")），我首先注意到的是源代码中的任何 HTML 都没有改变。在浏览器中，我可以看到更改，但在 HTML 中看不到。

这让我想知道，如果我使用 JQuery 来操作表单元素（通过 AJAX 调用或其他方式 - 我还不知道 Jquery），从 AJAX 调用返回的数据库数据将如何填充表单元素以及如何当它们在 HTML 中不存在时，它实际上会被提交到服务器吗？

我尝试仅使用 HTML 表单并在 CustomerNumber 文本字段旁边有一个提交按钮并创建一个自我提交页面，但这意味着在表单中拥有一个表单是不可能的......

【问题讨论】：

最简单的方法是使用 cfinput 的 bind 属性。
@DanBracuk 感谢您的提示。我正在考虑这样做，但认为 CF 只是代表我生成 javascript，这意味着我正在失去一些控制......？？
当它们在 HTML 中不存在时，它如何实际提交到服务器只要表单元素存在（并且是有效的）任何值它们包含在提交时将被发送到服务器。无论该值是由用户手动输入还是使用 Jquery 以编程方式输入。 Re: CF 只是代表我生成 javascript 正确。它有一些怪癖，并且还使用大多数 js 库（如 ExtJS）的旧版本。就个人而言，我会推荐使用 jquery，或者直接使用 ExtJS。
@Leigh 所以你是说如果表单“直观”显示我想要的数据，但在页面的查看源代码中它不存在于 HTML 中，数据仍然是提交到服务器？这是我无法理解的一点。当我操作
元素时，它在页面上发生了变化，但在 HTML 源代码中，旧文本仍然存在。
您可能正在考虑一些无关紧要的事情。首先，无法控制 ColdFusion 使用 cfform 生成的 js。该代码有效。其次是查看 html 源代码时出现的内容。重要的是，当您提交表单时，所有表单字段都会发布。

标签： jquery coldfusion coldfusion-10

【解决方案1】：

回答您“源代码似乎没有改变......”的问题，这是因为您的浏览器将来自服务器的 html 加载到内存中的 DOM 树中......

来自文档对象模型的 DOM，是一棵树，包含 HTML 中的所有节点，包括那些节点，每次浏览器找到脚本节点时，它都会执行它的代码并继续解析，以便他可以构建 DOM（这是解析页面的典型过程）。

当您单击鼠标右键并选择页面的源代码时，您将看到浏览器收到的 HTML，而不是处理后的 HTML。

为了进一步理解我在说什么，试着打开你写一个简单的例子

使用谷歌浏览器的元素，然后打开开发者工具栏（应该在工具>开发者工具中）或者在新引入的文本上右击检查。

您会看到您通过 javascript 所做的事情现在出现在 DOM 中，因为开发者工具将根据内存中的 DOM 对象而不是基于收到的源代码向您显示源代码。

要在不刷新页面的情况下从服务器获取响应，只需对服务器上的页面执行 $.getjson (http://api.jquery.com/jquery.getjson/)，该页面根据某些查询字符串参数返回响应。

注意，你的服务器页面可以是你当前的页面，假设你的页面叫做myform.php，你可以做一个$.getJSON('myform.aspx?action=getfieldvalue&field=customername', callback)，然后在你的页面你会有这样的东西：

(in the Page_Load event or in the top of your page for PHP)

if(QueryString["action"]=="getfieldvalue" && QueryString["customername"]!=null){
   Response.Clear();
   Response.Write("{name:""" + DataModel.GetCustomerName(QueryString["customername"]) + """}"); 
   Response.End();
}

以上代码只是草稿，参数解析考虑，页面回调和优化的替代方案没有考虑。

希望这会有所帮助，

问候。

【讨论】：