javascript - 动态/迭代构建页面内容

Question

我打算创建一个网站，让您可以迭代地构建一个 SQL 查询。

思路如下:

while(user wants more where clauses)
{
    show selection (html select) for table columns
    let user choose one column
    upon selection, show distinct values of that column
    let user choose one/multiple value(s)
}

我知道如何处理 SQL 部分，但我不确定如何处理页面的迭代构建。

所以我的问题是:

1. 根据上述想法迭代构建页面的最佳方法是什么？
2. 如果用户更改了之前的选择之一，我该怎么办？

该网站将使用 Perl 构建，我正在考虑将 Ajax 用于动态部分。

非常感谢任何帮助。

Answer 1

如果我要这样做，我会使用 SQL::Abstract .

更新:

如果您不想重绘整个页面，您将使用 AJAX。因此，为自己找到一个您觉得舒服的 JavaScript 库，其中包括 ajax 调用。 Jquery 有这个，其他一些也有。人们对各种图书馆有不同的看法。

无论如何，您的工作流程如下所示:

1. 用户提交表单
2. javascript 执行客户端验证
3. javascript 向服务器提交 AJAX 样式
4. 服务器执行服务器端验证、数据操作等。
5. 服务器响应数据有效载荷
6. 客户端根据有效负载的内容更新了屏幕。

所以让我们专注于 5 和 6。

数据负载:AJAX 中的 X 表示 XML，但许多应用程序会发回 JSON 或 HTML。

更新屏幕:

您可以通过设置标记的 innerHTML 或 outerHTML 属性将 HTML 直接应用于现有页面。但这不会更新 DOM。如果您不深入研究 clcinet 代码中的 DOM，那么这就足够了。如果你四处挖掘，那么你需要构建节点并将它们添加到页面的 DOM 中，因此你可能需要考虑发回 JSON 或 XML。

假设您有一个带有 id='generatedSQL' 的 div，当您的 AJAX 调用重新运行时，它将触发一个回调方法(我们称它为 updateSQL())，并且在回调中您将拥有看起来大致如下的代码:

$(#generatedSQL).innerHTML = theVariableHoldingTheHtml;

您的另一个选择是解析 JSONXML/等。并使用 createNode() 等，构建新的 DOM 位并将它们插入您的页面。我没有为你写这个的 jquery 排骨。每次我需要做类似的事情时，我都会查阅它。

如果查询文本只是仅显示，并且您从不尝试在客户端挖掘它，只需使用 innerHTML 方法，无论您是传递 HTML 还是传递 JSON 并从中生成 HTML。如果查询文本对客户端的内部工作很重要，那么您将需要编写大量 DOM 操作代码。