$.ajax ColdFusion cfc JSON Hello World答案

【问题标题】：$.ajax ColdFusion cfc JSON Hello World$.ajax ColdFusion cfc JSON Hello World
【发布时间】：2014-05-12 09:04:44
【问题描述】：

我已经尽可能地简化了这个例子。我有一个远程功能：

<cfcomponent output="false">
<cffunction name="Read" access="remote" output="false">
    <cfset var local = {}>

    <cfquery name="local.qry" datasource="myDatasource">
    SELECT PersonID,FirstName,LastName FROM Person
    </cfquery>
    <cfreturn local.qry>
</cffunction>
</cfcomponent>

使用 jQuery $.ajax 方法，我想为每个人制作一个无序列表。

    <!DOCTYPE HTML>
    <html>
    <head>
    <script src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
    google.load("jquery", "1");
    </script>
    <script type="text/javascript">
    jQuery(function($){
    $.ajax({
            url: "Remote/Person.cfc?method=Read&ReturnFormat=json",
            success: function(data){
                var str = '<ul>';
// This is where I need help:
                for (var I=0; I<data.length; I++) {
                    str += '<li>' + I + data[I][1]+ '</li>'
                }
                str += '</ul>';
                $('body').html(str);
            },
            error: function(ErrorMsg){
               console.log("Error");
            }
        });
    });
    </script>
    </head>
    <body>
    </body>
    </html>

我迷路的部分是我循环数据的地方。我更喜欢使用 jQuery $.ajax 方法，因为我知道 $.get 和 $.post 没有错误捕获。

我不知道如何处理从 cfc 返回的 JSON。

【问题讨论】：

标签： jquery json coldfusion cfc

【解决方案1】：

看起来结果是 json 格式（查看文档http://livedocs.adobe.com/coldfusion/8/htmldocs/help.html?content=Tags_f_21.html）。 “如果您指定 returnformat="json" 并且函数返回一个查询，ColdFusion 会将查询序列化为一个 JSON 对象，其中包含两个条目、列名数组和列数据数组数组。有关更多信息，请参阅 SerializeJSON。” http://livedocs.adobe.com/coldfusion/8/htmldocs/help.html?content=Tags_f_21.html

所以第一个数组（data.COLUMNS 应该是一个列名数组。data.COLUMNS[0] 将为您提供第一列的名称。data.DATA[0] 将为您提供查询的第一行.

一个不错的技巧是在 chrome 或 firebug 控制台中使用 console.log(data) 以结构化形式查看数据。

我没有对此进行测试，但它应该很接近。只需从数据中生成一个基本表。

$.ajax({
    url: 'Remote/Person.cfc?method=Read&ReturnFormat=json',
    dataType: 'json',
    success: function(response) {
        var str = '<table><tr>';
        var i;
        var j;

        //loop over each column name for headers
        for (i = 0; i < response.COLUMNS.length; i++) {
              str += '<th>' + response.COLUMNS[i] + '</th>';
          }
        }
        str += '</tr>';

        //loop over each row
        for (i = 0; i < response.DATA.length; i++) {
          str += '<tr>';
          //loop over each column
          for (j = 0; j < response.DATA[i].length; j++) {
              str += '<td>' + response.DATA[i][j] + '</td>';
          }
          str += '</tr>';
        }
        str += '</table>';

        $('body').html(str);
    },
    error: function(ErrorMsg) {
       console.log('Error');
    }
});

【讨论】：

感谢您帮助我意识到数据是大写的，错过了。不过，您的答案也遇到了同样的问题。 var data = response.data; 应该是 var data = response.DATA; 你的 for 循环也搞砸了。第一个应该是response.COLUMNS.length 和response.COLUMNS[i]，第二个和第三个应该分别是data.length 和data[i].length, data[i][j]。
糟糕。我以为参数是数据，忘记了重新分配。所以，我只是将“data”改为“response”并删除了“data = response.data”。

【解决方案2】：

最简单的方法是直观地查看返回的 JSON 数据的结构。那么横穿JS对象应该不会太难。您是否尝试过 JSON 可视化？ http://chris.photobooks.com/json/default.htm

如果您只需要 PersonID，您也可以从 CF 中返回 PersonID 数组或列表。

或者，您可以选择让 CF 返回纯文本，并生成所有 <li>。通过 ajax 传递的消息会更大，但需要维护的 JS 代码会更少。 CFML 更容易维护，对吧？ :)

【讨论】：

【解决方案3】：

我对 ColdFusion 不是很熟悉，但是您是否尝试过将数据类型设置为 JSON？

$.ajax({
    url: 'Remote/Person.cfc?method=Read&ReturnFormat=json',
    dataType: 'json',
    success: function(response) {
        var data = response.DATA;
        var str = '<ul>';

        for (var I = 0; I < data.length; I++) {
            str += '<li>' + I + data[I][1] + '</li>';
        }

        str += '</ul>';

        $('body').html(str);
    },
    error: function(ErrorMsg) {
       console.log('Error');
    }
});

如果您返回的数据类似于：

[["PersonID1", "FirstName1", "LastName1"],["PeronID2", "FirstName2", "LastName2"]] .. etc

如果上述方法不起作用，如果您可以显示请求返回的原始 JSON 数据，我应该能够轻松修复它。

另外，不确定它是否在您的代码中，但您在 for 循环中错过了行尾的分号。

【讨论】：

感谢您找到丢失的分号。我得到的数据是： {"COLUMNS":["PERSONID","FIRSTNAME","LASTNAME"],"DATA":[[1001,"Scott","Wimmer"],[1002,"Phillip ","Senn"],[1003,"Paul","Nielsen"]]} 另外，我不知道为什么，但是现在正在执行错误条件而不是成功条件。
@cf_PhillipSenn 试试我的编辑。如果它仍在执行错误条件console.log(ErrorMsg) 而不是字符串，请告诉我错误是什么。

【解决方案4】：

选项：

在你的情况下，我会放

<cffunction name="keywordAutoComplete" access="remote" 
            returntype="struct" returnformat="JSON" >

但是

这与returntype="string" returnformat="plain" + <cfreturn serializeJSON(query) > 的作用相同从 jQuery 的角度来看，这是一个问题，因为即使您使用 serializeJSON 按列序列化，您也会得到丑陋的 JSON。

您可以通过 cfloop 和连接手动制作 JSON 字符串：/
使用覆盖 serializeJSON 的 cfjson.cfc
访问 Ben Nadel 的网站并采用他的 toJSON 方法并以某种方式对其进行修改以满足您的需求

还有就是serializeJSON，返回大写的key，所以要注意，在js中使用lcase()或者写.LIKETHIS。

PS：试试这个在jQuery中动态创建html：

var someLiElement = $('<li />').addClass('custom_class')
                 .text('Foo bar')
                 .attr('id', 'custom_id' + someInteger)

然后将方法附加到父元素

【讨论】：

@anomareh "[['PersonID1', 'FirstName1', 'LastName1'],['PeronID2', 'FirstName2', 'LastName2']] .. " 不是 JSON，它是一个字符串带有漂亮的括号;)
我反对双引号：p