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数据的返回方式：

----＆gt;从列表中选择＆lt; ---- Backup MaintenanceMalware RemovalMonthly Server MaintenanceNetwatch Alert - 高CPU使用率Netwatch警报 - 低 CNetwatch备份AlertNew Employee TrainingPerform上的磁盘空间每月在工作站上进行调整测试2测试3测试5周 MaintenanceWhite-list请求

我正在使用我的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>

非常感谢任何帮助。谢谢。 -Brian

Answer 1

注意：默认情况下，CF序列化查询的方式很糟糕。从长远来看，你可能想要自己滚动并返回更典型（和直观）的东西，就像一组结构。但是仍然值得理解为什么你当前的代码不起作用，IMO。

<强>问题：

作为Scott pointed out，最大的问题是您的javascript代码需要一种格式，但您的cfc返回的格式不同。您需要更改其中一个，因此它们都是同步的。另外，正如我在评论中提到的那样，使用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。

Firefox Web Console

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的远程函数。

使用AJAX填充选择列表

1 个答案: