使用 AJAX 填充选择列表

Question

所以我是一个真正的 JQUERY 新手，所以请放轻松。

我想使用从 CFC 返回的数据填充 CFSELECT。这是我的工作 CFC：

<cfcomponent>
<cffunction name="getDescriptions" access="remote" returnformat="json" returntype="string" output="false">
    <cfquery name="customDescriptions" datasource="#datasource#">
        select description
        from service_descriptions
        where description <>"ADD NEW"
        order by description
     </cfquery>

    <cfset data = serializeJSON(customDescriptions)>
    <cfreturn data>
</cffunction>

以下是从我的 CFC 中返回数据的方式：

---->从列表中选择

我正在努力使用我的 AJAX 代码来填充我的 CFSELECT 表单元素。

<cfselect name="descriptionDD4" id="descriptionDD4">
   <option value="add_new">ADD NEW</option>
</cfselect>

这是迄今为止我的 AJAX 所拥有的，但它不起作用。

 <script>
       $(document).ready(function CheckAjaxCall()
            {
                $.ajax({
                    type:'POST',
                    url:'cfcs/get_descriptions.cfc?method=getDescriptions',                    
                    dataType:'json',
                    cache:false,
                    success:function(customDescriptions){ 

                $('##descriptionDD4').get(0).options.length = 0;
                $('##descriptionDD4').get(0).options[0] = new Option("--Select--", "0");        

                $.each(description, function(i,item) {
                                    $('##descriptionDD4').get(0).options[$('##descriptionDD4').get(0).options.length] = new Option(item[i].Name, item[i].roll);
                                                                                                                    // Display      Value
                            });

                            },
                            //error:function(){alert("Connection Is Not Available");}
                        });

                        return false;
                    });
            </script>

任何帮助将不胜感激。谢谢。 -布赖恩

Answer 1

注意：默认情况下，CF 序列化查询的方式很不稳定。从长远来看，您可能希望自己滚动并返回更典型（和直观）的东西，例如结构数组。但仍然值得了解为什么您当前的代码不起作用，IMO。

问题：

作为Scott pointed out，最大的问题是您的javascript 代码需要一种格式，但您的cfc 却返回了另一种格式。您需要更改其中之一，以便它们同步。另外，正如我在 cmets 中提到的，使用 cfselect 在这里不会给您带来任何好处，所以只需使用纯 html select 代替。

调试：

在您对来自 CFC 的响应进行任何操作之前，您需要了解它发回的内容的格式。简单开始。只需在页面加载时调用cffunction 并将响应记录到控制台。您可以稍后在它工作后将所有内容包装在一个函数中。

<script type="text/javascript">
$(document).ready(function(){
    // Important: Must append the parameter "&returnformat=json"
    $.ajax({
       url: 'cfcs/get_descriptions.cfc?method=getDescriptions&returnformat=json'
       , dataType: 'json'
       , success: function(response){
           console.dir(response);
       },
       error: function(msg){
           console.log(msg);
       }
    })
}); 
</script>

使用 FF 的 Web 控制台，您将看到一个包含两个键的结构：COLUMNS 和 DATA。

DATA 是一个多维数组，包含您的查询结果。它按行号和列号索引。您可以循环遍历它，就像在 CF 中一样。唯一的区别是索引将从零开始（当然键名在 JS 中区分大小写）。将以下代码添加到您的 success 函数中，您将看到 Web 控制台中显示的查询值。

 // display values for debugging purposes
 for (var i = 0; i < response.DATA.length; i++){
    console.log("value in row ["+ i +"] column [0] = "+ response.DATA[i][0]);
 }

用法：

一旦您了解了如何访问数据，只需使用它来填充列表即可。您可以使用for 循环单独附加选项，或者使用the method described here 将DATA 数组插入$.each 函数。由于您的查询仅返回一列，因此我将它用于选项文本和值。

$.each(response.DATA, function(i, row){
            // get value in first column ie "description"
            var description = row[0];

            // append new option to list
            $("#descriptionDD4").append($('<option/>', { 
                    value: description,
                    text : description 
            }));
        });

剩下的就是将 ajax 调用包装在一个函数中，您可以在任何需要的地方调用。但是你应该能够自己弄清楚那部分。

希望这对使用 jQuery 的远程 cffunctions 有所帮助。