jquery - JQUERY 的 cfc 文件中的 JSON 结果出现错误

Question

我正在尝试将 JQUERY 与 Coldfusion 结合使用。我想从 cfc 文件中的函数以 JSON 格式从数据库检索结果。我需要使用多个查询手动创建 json:

<cfcomponent output="false">
    <cffunction name="getTransports" access="remote" returnformat="JSON" output="false">
        <cfargument name="CITY_TO" type="string" required="yes">  
        <cfargument name="CITY_FROM" type="string" required="yes"> 

        <cfquery name ="transport" datasource="#application.datasource#">
        <!---Query Transports--->
            select * from TRANSPORTS
        </cfquery>

        <cfset transports = arrayNew(1)>

        <cfloop from="1" to="#transport.recordcount#" index="i">   

            <cfquery name="defined_transport" datasource="#application.datasource#">
                select * from TABLE_FRAIS 
                where CITY_TO = <cfqueryparam cfsqltype="cf_sql_varchar" value="#arguments.CITY_TO#">
                and CITY_FROM = <cfqueryparam cfsqltype="cf_sql_varchar" value="#arguments.CITY_FROM#">
                and CTRP_ST_CODE = '#transport.TRANSPORT_CODE#' 
            </cfquery>

            <cfif defined_transport.recordCount eq 0>
                <cfset transport_value = "#transport.TRANSPORT_NAME# (not defined)">
            <cfelse>  
                <cfset transport_value = "#transport.TRANSPORT_NAME#">
            </cfif>

            <cfset transpVO = structNew() />

            <cfset transpVO['ID']= #transport.TRANSPORT_CODE# />            
            <cfset transpVO['VALUE']= #transport_value# />      
            <cfset transports[i] = transpVO />
        </cfloop>

        <cfreturn transports>       

    </cffunction>

</cfcomponent>

当我在 JQUERY 脚本中检索结果时，我获得了一个字符串 JSON:

[ { "ID" : "APEX",
    "VALUE" : "Apex (not defined)"
  },
  { "ID" : "AVI",
    "VALUE" : "Plane (not defined)"
  },
  { "ID" : "TRAIN 1",
    "VALUE" : "Train 1st class"
  },
  { "ID" : "VOIT",
    "VALUE" : "Car"
  },
  { "ID" : "ZERO",
    "VALUE" : "Cost 0 (not defined)"
  }
]

编辑:

这是我的 JQUERY 脚本，用于通过 Coldfusion 检索数据:

$().ready(function() {
     $.ajax({
        type:   'GET',
        url:    'transports.cfc',
        data: {
            method:     'getTransports',
            CITY_TO:    'LUX',
            CITY_FROM:  'UWP'
        },
        dataType: "application/json",  //this is important      responsetype:'JSON',

        success: function(result) {
            var select = $("##transp");
            select.empty();
            select.append(
                new Option('Select transport', '-1')
            );
            console.log(result); // display the JSON
            console.log(result.length); // displays 252
        },
        error: function(xhr, message) {
            alert('ajax request failed');
            console.log(xhr, message);
        }
     });
}); 

结果显示在控制台中，如果我不知道如何填充下拉列表，可能会这样。我尝试添加:

        select.append(
            new Option(item.ID, item.VALUE)
        );

我在下拉列表中获得了 252 行，没有文本。

但是我试图用它来填充下拉列表，但我做不到。

您能告诉我我的 Coldfusion 函数和 JSON 结果是否正常吗？

问候，

Answer 1

问题似乎出在您的脚本上。您应该尝试使用循环一次添加一个选项:

var select = $("#transp");
select.empty();
select.append(
    new Option('Select transport', '-1')
);
for(var i=0; i<result.length; i++){
    select.append(
      new Option(result[i].ID, result[i].VALUE)
    );
}

这是一个工作片段:http://jsfiddle.net/odp3dve8/1/

//oResult simulates the AJAX result :
var oResult = [ { "ID" : "APEX",
    "VALUE" : "Apex (not defined)"
  },
  { "ID" : "AVI",
    "VALUE" : "Plane (not defined)"
  },
  { "ID" : "TRAIN 1",
    "VALUE" : "Train 1st class"
  },
  { "ID" : "VOIT",
    "VALUE" : "Car"
  },
  { "ID" : "ZERO",
    "VALUE" : "Cost 0 (not defined)"
  }
];


var select = $("#transp");
select.empty();
select.append(
    new Option('Select transport', '-1')
);
//Loop on each element of the JSON result and add each option.
for(var i=0; i<oResult.length; i++){
   	select.append(
      new Option(oResult[i].ID, oResult[i].VALUE)
    );
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select id="transp">
    <option value="1">Fake option 1</option>
    <option value="2">Fake option 2</option>
</select>

<小时/>

编辑。 对于 string/json 问题，您可以尝试更新请求参数“headers”和“datatype”:

$.ajax({
    type:   'GET',
    url:    'transports.cfc',
    data: { ... },

    headers: {'Accept': "application/json"},
    dataType: "json",


    success: function(result) { ... }
    error: function(result) { ... }
});

如果这不起作用，您可能会对这篇文章感兴趣: http://blog.tcs.de/coldfusion-query-to-javascript-object/