logo标签列表

使用Jquery Ajax和CFC填充下拉菜单

jqueryajaxdrop-down-menucoldfusioncfc
3

我正在尝试通过数据库数据填充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在服务器端预先生成呢？ - BKK
首先，无论是客户端还是服务器端技术，我都不需要刷新页面。请问在服务器端技术（即ColdFusion）中是否也可以实现相同的效果？ - Crash OR
第二点：ColdFusion 内置的 AJAX 功能对我不适用，例如 cfajaximport 等。 - Crash OR
我看不出一个简单的循环为何会变慢。你是指ajax响应很慢吗？循环几个项目并添加到选择框应该几乎是瞬间完成的。 - Paul
数据库查询返回的最少行数为4000-5000行。因此，延迟很可能是由于需要动态创建的选项元素数量过多所致。您是否建议其他替代方案来显示和使用这些数据？ - Crash OR
5个回答
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);来填充选择器，响应中现在包含一堆选项标签。

谢谢Travis！我尝试了这个选项，但性能几乎没有改善。数据库查询返回的最少行数为4000-5000行。因此，延迟很可能是由于必须动态添加的选项元素数量引起的。您有建议如何显示和使用这些数据的其他替代方案吗？ - Crash OR
你有计时查询和输出4-5k条记录所需的时间吗？你可以在查询之前和输出之后放置getTickCount()并减去差异。你也可以使用Chrome开发者工具或Firebug查看请求并确定延迟的确切位置。 - genericHCU
我尝试使用JavaScript的Date().getTime()来实现。我在Ajax调用之前立即设置开始时间，在调用返回带有“options”字符串的结束时间。然而，与整个处理时间相比，时间要少得多。更明确地说，查询平均需要执行6秒。而选项则在惊人的平均16秒后显示。 - Crash OR
我想不出任何可能加快速度的方法。我想，即使您直接浏览到所请求的响应，渲染5k行数据仍需要几秒钟的时间。 - genericHCU
这个6秒的查询是比较静态的吗？你可以将其缓存并使用自动完成而不是下拉菜单。等待用户输入3个字母后开始提供建议。 - genericHCU
显示剩余2条评论
0

使用这个语法，可能对仅限于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>

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

0

  1. 如果你通过ajax获取选项，你应该能够在firefox的Firebug控制台中运行并查看获取数据所花费的确切时间。这将确切地证明问题是下载时间还是渲染时间。另外考虑以下几点：查询缓存、将js数组或列表写入js文件并使用纯粹的js而不是CF，或者减少选项的数量（我无法想象浏览5000个选项）

  2. 你也可以尝试将数据作为列表下载，并使用

    str.replace(',','<option>')

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

    <option>1<option>2<option>3...<option>N
  1. 最后，如果这仍然太慢，我建议使用延迟加载程序来以更可管理的块载入您的选项。甚至可以使用settimeout触发延迟加载程序，继续加载块而不考虑用户的操作。

希望能对您有所帮助。

非常感谢Alain提供的Firebug建议！我知道是remove语句导致了延迟。我尝试了$('#dropdown').empty();，$('#dropdown option').remove();和$('#dropdown').html('');。然而，它们都没有提供任何改进。是否有任何替代的JavaScript或Jquery函数可以使用？或者您建议采用哪种解决方法来提高性能？ - Crash OR
尝试使用懒加载器或仅使用Ajax加载器，以便在列表加载时客户端可用。 - Alain Nisam
你能举个例子来说明使用ajax加载器或懒加载器加载下拉选项的情况吗？ - Crash OR
0

ColdFusion 未定义错误可能是因为您的虚拟映射到 /CFIDE/scripts 文件夹丢失了，您可以手动从类似的 CF 安装中复制它到您的 Web 根目录以解决此问题，或者修复您的安装。

感谢Ben的建议！我之前尝试过这个方法并得出了相同的结论。但是这个选项对我不可用。因此，无法使用ColdFusion的内置AJAX功能。 - Crash OR
0

你在每次循环迭代时都跳入DOM。 你需要在退出循环后执行$("#dropdown")操作。

我尝试实施Travis之前的建议。在这里，CFC页面创建一个<option>列表字符串并将其返回给调用CFM页面。然后，CFM页只需使用以下语句将其添加到下拉菜单中。' $("#dropdown").html(options_list_string);但是这里也没有明显的性能改善。 - Crash OR
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接