Jquery 使用AJAX从ColdFusion组件页面获取数据，并用结果填充另一个下拉列表

我知道以前也有人问过类似的问题，也有人回答过类似的问题，但我的代码有一些具体的问题。当带有

id=“SITE”

的下拉列表被更改时，我希望带有

id=“YARD”

的下拉列表填充来自该站点的码。这是我的组件CFC代码（在名为AjaxFunctions.CFC的页面中）：

这是我呼叫页面标题部分的接收代码：

<script>
    $(document).ready(function() {
        $("#SITE").change(function() {
            alert( "SITE has changed." );// testing to see if jQuery works
            // empty YARD dropdown
            $("#YARD").empty();
            // perform ajax
            $.ajax({
                type: "GET",
                url: "AjaxFunctions.cfc",
                data: {
                    method: "getYards",
                    Site: $("#SITE").val()
                },
                datatype: "json",
                success: function(data) {
                    alert("We received the data."+data);
                    $.each(data, function () {
                        $("#YARD").append($("<option></option>").val(this['ITEMID']).html(this['ITEMDESC']));
                    }                   
                }
            });
        });
    });
</script>

<!---  jQuery/AJAX to autofill dropdowns  --->
    <script>
    $(document).ready(function() {
        $("#SITE").change(function() {   // when the SITE dropdown changes 
            $("#YARD").empty();          // empty the YARD dropdown 
            $.ajax({
                type: "GET",
                url: "AjaxFunctions.cfc",
                data: {
                    Site: $("#SITE").val(),
                    Method: "getYards"
                    },
                dataType: "text",
                success: function(data) {
                    var options = data.split(",");              // convert returned list to array 
                    var select = document.getElementById('YARD');
                    for(var i=0;i<options.length; i++)
                    {
                        var options2 = $.trim(options[i]);      // clean up label portion 
                        $("#YARD").append($("<option></option>").val(options[i]).text(options2));   // append options to YARD dropdown 
                    }
                }
            });
        });
    });
    </script>

$（文档）.ready（函数（）{
$（“#站点”）.更改（函数（）{
警报（“站点已更改”）；//测试jQuery是否有效
//空码下拉列表
$（“#码”）.empty（）；
//执行ajax
$.ajax({
键入：“获取”，
url:“AjaxFunctions.cfc”，
数据：{
方法：“getYards”，
地点：$（“#地点”）.val（）
},
数据类型：“json”，
成功：功能（数据）{
警报（“我们收到了数据。”+数据）；
$。每个（数据、函数（）{
$（“#码”）.append（$（“”）.val（this['ITEMID']）.html（this['ITEMDESC']）；
}                   
}
});
});
});

当我按原样尝试代码时，绝对不会发生任何事情。当我注释掉这些行时

$.each(data, function () {
    $("#YARD").append($("<option></option>").val(this['ITEMID']).html(this['ITEMDESC']));
} 

$。每个（数据、函数（）{
$（“#码”）.append（$（“”）.val（this['ITEMID']）.html（this['ITEMDESC']）；
} 

---

然后我收到通知“站点已更改”，庭院下拉列表清空，但“我们收到了数据…”警报看起来像是错误页面中的HTML代码。我想我以后可能会担心更新YARD下拉列表，现在我担心的只是从查询中接收数据。

你能更改cffunction吗？ColdFusion的JSON查询格式是goofy。依我看，更改函数更简单。返回一个带有不管您想要什么键名，比如“yard”。（不要忘记定义函数变量的范围，并将

returntype

更改为“array”）

HTML:

一个
两个
选择某物

非常感谢@Ageax的帮助。我最终选择了一条更简单的路线。以下是我的功能：

<cfcomponent output="false">
<!---  Get YARDS dataset based on SITE  --->
    <cffunction name="getYards" access="remote" returntype="string" returnformat="plain" >
        <cfargument name="Site" type="string" required="true" /> 
        <cfquery name="rs_Yards" datasource="MyDatasource" >
            <!--- SQL code here --->
        </cfquery>
        <cfset myList = ValueList(rs_Yards.Yard)>   <!--- convert query results to list --->
        <cfreturn MyList />
    </cffunction>
</cfcomponent>

以下是调用页面上的jQuery：

<script>
    $(document).ready(function() {
        $("#SITE").change(function() {
            alert( "SITE has changed." );// testing to see if jQuery works
            // empty YARD dropdown
            $("#YARD").empty();
            // perform ajax
            $.ajax({
                type: "GET",
                url: "AjaxFunctions.cfc",
                data: {
                    method: "getYards",
                    Site: $("#SITE").val()
                },
                datatype: "json",
                success: function(data) {
                    alert("We received the data."+data);
                    $.each(data, function () {
                        $("#YARD").append($("<option></option>").val(this['ITEMID']).html(this['ITEMDESC']));
                    }                   
                }
            });
        });
    });
</script>

<!---  jQuery/AJAX to autofill dropdowns  --->
    <script>
    $(document).ready(function() {
        $("#SITE").change(function() {   // when the SITE dropdown changes 
            $("#YARD").empty();          // empty the YARD dropdown 
            $.ajax({
                type: "GET",
                url: "AjaxFunctions.cfc",
                data: {
                    Site: $("#SITE").val(),
                    Method: "getYards"
                    },
                dataType: "text",
                success: function(data) {
                    var options = data.split(",");              // convert returned list to array 
                    var select = document.getElementById('YARD');
                    for(var i=0;i<options.length; i++)
                    {
                        var options2 = $.trim(options[i]);      // clean up label portion 
                        $("#YARD").append($("<option></option>").val(options[i]).text(options2));   // append options to YARD dropdown 
                    }
                }
            });
        });
    });
    </script>

$（文档）.ready（函数（）{
$（“#SITE”）.change（函数（）{//当站点下拉列表更改时
$（“#码”）.empty（）；//清空码下拉列表
$.ajax({
键入：“获取”，
url:“AjaxFunctions.cfc”，
数据：{
地点：$（“#地点”）.val（），
方法：“getYards”
},
数据类型：“文本”，
成功：功能（数据）{
var options=data.split（“，”；//将返回的列表转换为数组
var select=document.getElementById（'YARD'）；
对于（var i=0；i请共享您收到的错误HTML代码。如果您只是从浏览器直接导航到您的CFC，会发生什么情况？警报看起来像错误页面中的HTML代码。请尝试直接在浏览器中调用CFC，将响应写入
控制台。log
或使用浏览器的javascript控制台查看响应。想到的其他问题。1.应该是
数据类型：“json”
（大写“T”）2.CF函数不返回JSON。一种方法是在url中请求它：
AjaxFunctions.cfc？method=yourCFFunctionName&returnformat=JSON
3.jquery代码需要一个结构数组。这不是CF函数返回的结果。@Miguel-F当我在浏览器中直接调用页面AjaxFunctions.cfc时，我得到一个“404错误：404-找不到文件或目录。您正在查找的资源可能已被删除、名称已更改或暂时不可用。”但URL已更改，从浏览器导航时引用了“cfcexplorer.cfc？method=getcfcinhtml”，请记住指定该方法（否则它将执行您看到的操作）。从您的示例中可以看到类似
www.example.com/whateverfolder/AjaxFunctions.cfc？method=getYards
。请参阅您上面的注释。如果您不提供方法，则会出现这种情况。如果您需要传递参数（如可能
站点
）然后用
&
将它们附加到URL。但是@Ageax提到的仍然成立-您的ajax调用需要JSON，并且您的方法设置为返回查询对象。请参阅上面的注释，其中@Ageax为您提供了一个示例URL以供测试。我完全按照编写的方式实现了您的代码。我添加的唯一一件事是作为第一行的警报成功函数。庭院下拉列表清空，但没有重新填充，成功警报从未出现。对我来说效果很好。唯一的变化是使用QueryNew代替db cfquery。（愚蠢的问题，但你在函数中添加了真正的查询，对吗？）使用浏览器的javascript控制台查看ajax请求的情况。例如，Firefox web控制台>网络选项卡…网络选项卡还显示http响应内容。大多数浏览器都有类似的内容。我将以下数据返回到调用页面：{“COLUMNS”：[“YARD”]，“data”：[[“YARD-C”]，[“YARD-C5”]，[“YARD-E”]，[”YARD-G“]]}所以我知道我正在接收数据。它只是没有用返回的数据填充下拉菜单。@ToddK-看起来不像您更改了cffunction，所以它仍然以旧格式返回数据。请参阅我上面的更新（只需要添加cfquery）。它返回一个类似以下结构的数组
[{“YARD”：“X-745-C”}，{“YARD”：X-745-C5“}，{“码”：“X-745-E”}，{“码”：“X-745-G”}]
<cfcomponent output="false">
<!---  Get YARDS dataset based on SITE  --->
    <cffunction name="getYards" access="remote" returntype="string" returnformat="plain" >
        <cfargument name="Site" type="string" required="true" /> 
        <cfquery name="rs_Yards" datasource="MyDatasource" >
            <!--- SQL code here --->
        </cfquery>
        <cfset myList = ValueList(rs_Yards.Yard)>   <!--- convert query results to list --->
        <cfreturn MyList />
    </cffunction>
</cfcomponent>

<!---  jQuery/AJAX to autofill dropdowns  --->
    <script>
    $(document).ready(function() {
        $("#SITE").change(function() {   // when the SITE dropdown changes 
            $("#YARD").empty();          // empty the YARD dropdown 
            $.ajax({
                type: "GET",
                url: "AjaxFunctions.cfc",
                data: {
                    Site: $("#SITE").val(),
                    Method: "getYards"
                    },
                dataType: "text",
                success: function(data) {
                    var options = data.split(",");              // convert returned list to array 
                    var select = document.getElementById('YARD');
                    for(var i=0;i<options.length; i++)
                    {
                        var options2 = $.trim(options[i]);      // clean up label portion 
                        $("#YARD").append($("<option></option>").val(options[i]).text(options2));   // append options to YARD dropdown 
                    }
                }
            });
        });
    });
    </script>