Question

我之前已经问过类似的问题并得到了回答，但我的代码存在特定问题。当id="SITE"的下拉列表发生更改时，我希望使用id="YARD"的下拉列表填充该网站的码数。这是我的组件CFC代码（在一个名为AjaxFunctions.cfc的页面中）：

<cfcomponent output="false">
<!---  Get YARDS dataset based on SITE  --->
    <cffunction name="getYards" access="remote" returntype="query" />
    <cfargument name="Site" type="string" required="true" /> 
    <cfquery name="rs_Yards" datasource="abc" username="notReal1" password="notReal2" >
        <!--- SQL code here --->
    </cfquery>
    <cfreturn rs_Yards />
    </cffunction>
 <cfcomponent>

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

<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>

Whey我按原样尝试代码，绝对没有任何反应。当我注释掉这些行

时

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

然后我收到通知＆＃34;网站已更改＆＃34;并且YARD下拉清空了，但是＆＃34;我们收到了数据......＆＃34;警报看起来像错误页面中的HTML代码。我想我可以担心稍后更新YARD下拉列表，现在我担心只是从查询中接收数据。

Answer 1

你能改变功能吗？ ColdFusion的查询JSON格式很愚蠢。 IMO，更改功能更简单。使用您想要的任何键名返回一组结构，例如＆＃34; yard＆＃34;。（不要忘记调整函数变量的范围并将returntype更改为＆＃34;数组＆＃34;）

<cfcomponent output="false">
   <cffunction name="getYards" access="remote" returntype="array" >
       <cfargument name="Site" type="string" required="true" /> 

       <cfset var rs_Yards = "">
       <cfset var response = []>

       <!--- demo data. replace this with your cfquery --->
       <cfset rs_Yards = QueryNew("")>
       <cfset queryAddColumn(rs_Yards, "Yard", ["X-745-C ","X-745-C5","X-745-E ","X-745-G "])>

       <cfloop query="rs_Yards">
           <cfset arrayAppend(response, { "yard": rs_Yards.yard })>
       </cfloop>

       <cfreturn response />
   </cffunction>
</cfcomponent>

合并我在评论中提到的其他更改：

Javascript区分大小写。将datatype更改为dataType（资本＆＃34; T＆＃34;）
更改URL以从组件请求JSON： AjaxFunctions.cfc?method=getYards&returnformat=json

最后，在$.each()循环中使用新的密钥名称＆＃34; yard＆＃34 ;.

JQuery的：

$(document).ready(function() {
    $("#SITE").change(function() {
        $("#YARD").empty();
        $.ajax({
            type: "GET",
            url: "AjaxFunctions.cfc?method=getYards&returnformat=JSON",
            data: {Site: $("#SITE").val()},
            dataType: "json",
            success: function(data) {
                $.each(data, function() {
                     $("#YARD").append($("<option></option>").val(this.yard).text(this.yard));
                }); 
            }
        });
    });
});

HTML：

<form>
   <select id="SITE" name="SITE">
      <option value="123">One</option>
      <option value="456">Two</option>
   </select>
   <select id="YARD">
       <option value="123">select somthing</option>
   </select>
</form>

Answer 2

非常感谢@Ageax的所有帮助。我走了一条更简单的路线。这是我的功能：

 {
            "id": "97727151-8724-443a-a1c8-
            "first_name": "",
            "last_name": "",
            "email": "admin@gmail.com",
            "is_active": true,
            "is_staff": true,
            "last_login": "2018-03-27T18:23:43.868368Z",
            "created_date": "2018-03-27T14:54:33.566971Z"
        }

这是调用页面上的jQuery：

$http.post("MyService/MyAction").then(function (res) {
     if (res == true) {
         window.localStorage.removeItem(myToken);
         //window.localStorage.getItem(myToken) returns null in here.     
     }
})
.then(
    window.location = baseURL + 'Login.aspx';
)
.error(function () {
    //some stuff
});

希望这有助于其他人。

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

2 个答案: