使用 Jquery Ajax 和 CFC 的下拉人口答案

【问题标题】：Dropdown Population with Jquery Ajax & CFC使用 Jquery Ajax 和 CFC 的下拉人口
【发布时间】：2012-10-11 16:37:38
【问题描述】：

我正在尝试使用数据库数据填充 HTML 下拉列表。为此，我正在从数据库中检索数据并创建选项元素，如下所示：

var obj = eval("(" + data + ")");
for (i = 1; i <= obj.DATA.length; i++) {
    var col_val = obj.DATA[i - 1];
    $("#dropdown").append('<option value="' + col_val + '">' + col_val + '</option>');
}

我尝试了另一种方法如下：

$("#dropdown").html(data);

其中，data 是一个字符串，其中包含由调用的 CFC 页面在使用 cfloop 循环数据库查询后返回的选项元素列表。

在添加新选项之前，我将使用以下任一语句删除旧选项。

$('#dropdown').empty(); 

$('#dropdown option').remove();

$('#dropdown').html('');

经过分析，我发现删除选项导致了最大延迟。

是否有更快的替代 JavaScript 或 Jquery 函数可用于删除选项？或者您是否建议任何变通方法来提高性能？

注意：为此我必须使用 ColdFusion 和 AJAX。我也不能使用 ColdFusion 的内置 AJAX 功能。

谢谢！！

【问题讨论】：

您使用 JavaScript 填充此客户端与使用 ColdFusion 在服务器端预生成它的任何原因？
首先：无论客户端或服务器端技术如何，我都不必刷新页面。请让我知道服务器端技术是否可以做到这一点，即 ColdFusion。
第二：在我的情况下，ColdFusion 的内置 AJAX 功能不是一个选项，例如 cfajaximport 等。
我看不出一个简单的循环有多慢。你的意思是ajax响应很慢？循环几个项目并添加到一个选择组合应该几乎是即时的。
数据库查询返回的行数最少为 4000-5000 行。因此，延迟很可能是由它必须动态创建的选项元素的数量引起的。您是否建议任何其他替代方法来显示和使用这些数据。

标签： jquery ajax drop-down-menu coldfusion cfc

【解决方案1】：

我通常从 ajax 请求返回 html，所以响应看起来像

<option value = "1">1</option>
<option value = "2">2</option>
<option value = "3">3</option>
<option value = "4">4</option>
...

然后只需使用$("#selectName").html(data); 来填充选择，其中包含现在包含一堆选项标签的响应。

【讨论】：

谢谢特拉维斯！！我尝试了这个选项，但性能几乎没有任何改善。数据库查询返回的行数最少为 4000-5000 行。因此，延迟很可能是由它必须动态添加的选项元素的数量引起的。您是否建议任何其他替代方法来显示和使用这些数据？
您是否对查询以及输出 4-5k 条记录所需的时间进行了计时？您可以将 getTickCount() 放在查询之前和输出之后并减去差值。您还可以使用 chrome 开发者工具或 firebug 来查看请求并查看延迟的确切位置。
我尝试使用 JavaScript 的 Date().getTime() 这样做。我将开始时间放在 Ajax 调用之前，并在调用返回后立即使用“选项”字符串结束时间。但是，与整体处理时间相比，时间要少得多。更清楚地说，查询以 avg 执行。 6 秒。选项显示在一个惊人的平均值之后。 16 秒。
我想不出任何可以加快速度的方法。我想如果您直接浏览到您请求的响应，仍然需要几秒钟来呈现 5k 行数据。
5k 结果在下拉列表中似乎有点压倒性......有什么理由显示许多结果吗？有没有办法进一步缩小选择范围？

【解决方案2】：

ColdFusion is undefined 错误可能是因为您缺少到 /CFIDE/scripts 文件夹的虚拟映射，您可以手动将其从类似的 CF 安装复制到您的 webroot 以解决此问题或修复您的安装。

【讨论】：

感谢本您的意见！我早些时候尝试过这个并得出了相同的结论。但是这个选项对我不可用。所以无法使用 ColdFusion 的内置 AJAX 功能。

【解决方案3】：

在循环的每次迭代中，您都会跳入 DOM。退出循环后需要执行 $("#dropdown") 操作。

【讨论】：

我尝试执行上面 Travis 的建议。在这里，CFC 页面创建

【解决方案4】：

如果您通过 ajax 获取选项，您应该能够运行 firefox Firebug 控制台并查看获取数据所需的确切时间。这可以肯定地证明问题是下载时间还是渲染时间。还要考虑：查询缓存、将 js 数组或列表写入 js 文件并在 CF 上使用直接 js 或减少选项数量（我无法通过 5k 选项进行图像滚动）
您也可以尝试将数据下载为列表并使用
```
str.replace(',','<option>') 
```

将每个列表项“包装”在选项标记中。请记住：如果值和文本相同，则不必具有 value 参数。并且：您不必关闭选项标签：

    <option>1<option>2<option>3...<option>N

最后，如果这仍然太慢，那么我建议使用惰性加载器将您的选项加载到更易于管理的块中。您甚至可以触发惰性加载器以继续加载块，而不管用户的操作如何（使用 settimeout）。

希望这会有所帮助。

【讨论】：

非常感谢 Alain 的 Firebug 建议！我知道是导致延迟的删除语句。我试过$('#dropdown').empty();、$('#dropdown option').remove();和$('#dropdown').html('');。但是，它们都没有提供任何改进。是否可以使用任何替代的 JavaScript 或 Jquery 函数？或者您是否建议任何变通方法来提高性能？
尝试惰性加载器，甚至只是一个 ajax 加载器，以便客户端在列表加载时可用。
您能举一个在使用 ajax 加载器或惰性加载器加载下拉选项的上下文中相同的示例吗？

【解决方案5】：

使用这种语法，这可能对仅使用 Coldfusion 有帮助

<CFSELECT NAME="name"
    REQUIRED="Yes/No"
    MESSAGE="text"
    ONERROR="text"
    SIZE="integer"
    MULTIPLE="Yes/No"
    QUERY="queryname"
    SELECTED="column_value"
    VALUE="text"
    DISPLAY="text"
    PASSTHROUGH="HTML_attributes">

</CFSELECT>

在查询属性附近，您可以传递您的查询名称。

【讨论】：