3

我知道之前有人问过类似的问题并得到了回答,但我的代码存在特定问题。当下拉列表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>

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

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

然后我收到通知“站点已更改”并且 YARD 下拉列表为空,但“我们收到数据...”警报看起来像来自错误页面的 HTML 代码。我想我可以担心稍后更新 YARD 下拉列表,现在我担心只是从查询中接收数据。

4

2 回答 2

3

你能改变cffunction吗?ColdFusion 的 JSON 查询格式很傻。IMO,更改功能更简单。返回具有您想要的任何键名的结构数组,例如“yard”。(不要忘记定义函数变量的范围并将其更改returntype为“数组”)

<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 区分大小写。更改datatypedataType(大写“T”)
  • 更改 URL 以从组件请求 JSON: AjaxFunctions.cfc?method=getYards&returnformat=json

最后,在$.each()循环中使用新的键名“yard”。

查询:

$(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>
于 2018-03-23T19:45:00.830 回答
1

非常感谢@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:

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

希望这对其他人有帮助。

于 2018-03-27T18:45:26.557 回答