Javascript 从CFC查询结果填充HTML表数据

我有一个调用CFC的Ajax请求：

阿贾克斯：

然后，我的CFC查询我的数据库： 氟氯化碳

我可以在控制台输出中看到正在返回查询数据。我试图做的是用结果填充HTML表数据。我正试图通过AJAX调用的success函数来实现这一点

这是我的HTML表格

但我看到的只是添加到TD元素中的文本“emailTracking.timestamp”，而不是返回的数据。我做错了什么？

问题

如果查询可以返回多条记录，那么JS代码将需要循环遍历这些结果，为每条记录添加一条新记录。 将JS变量括在引号中可防止对其求值。所以“emailTracking.timestamp”注意引号是一个字符串，而不是一个变量。 传递给success函数的实际变量名为data，而不是emailTracking.timestamp。要访问查询数据，请使用数据变量。 CFC可能正在返回查询，但格式不正确。CF，jQuery代码将无法正确处理它。使用更兼容的格式，如JSON。 决议

要请求JSON格式的响应，请将参数添加到ajax url：

?method=getData&returnFormat=json&....

将jquery响应设置为json，使其自动反序列化

    ...
    type: "POST",
    dataType: "json",
    url: "..."
    ...

虽然将？returnFormat=json添加到url中足以返回json，但CF的查询默认格式非常。。。非标准的因此，您可能希望修改CFC以返回结构数组。只是别忘了将函数返回类型更改为array

<cffunction name="getData" access="remote" returnType="array">     
    ... code

    <cfset local.response = []>
    <cfloop query="emailTracking">
        <cfset arrayAppend(local.response
                          , { "timestamp": emailTracking.timestamp
                              , "sender": emailTracking.sender
                              , "recipient": emailTracking.recipient
                            }
                        )>
    </cfloop>

    <cfreturn local.response>

</cffunction>   

---

有两种方法可以解决这个问题。让CFC方法返回JSON，然后使用jQuery填充表，或者让CFC方法在查询上循环创建HTML，然后返回给ajax，以便包含它。前一种方法是最好的方法，但如果您不知道jQuery，则后一种方法更容易。您当前正在向表单元格追加一个常量字符串。看看数据是如何返回的。在成功处理程序中写入：console.dirdata。然后您可以看到如何访问要写入单元格中的值。我不明白。所以我应该以不同的方式引用我的查询结果，而不是$timestampTD.append'emailTracking.timestamp'？你能举个例子吗？My console.dirdata不在其中显示我的数据。append方法采用html字符串。输出传递到success函数中的数据，并查看数据在JavaScript中的格式。然后将数据传递到append函数中。很棒的解释！这对我理解整个过程有很大帮助。非常感谢。很高兴这很有帮助。CF的默认查询格式非常。。。非标准的因为CF在返回数据方面总是有点不稳定，特别是在JSON起作用的地方，我总是发现按照Ageax的建议并建立一个特定的返回值更可靠。@Shawn-我不认为S.O.会欣赏我对默认格式的真实想法，所以我一直。。。机智的-

?method=getData&returnFormat=json&....

    ...
    type: "POST",
    dataType: "json",
    url: "..."
    ...

<cffunction name="getData" access="remote" returnType="array">     
    ... code

    <cfset local.response = []>
    <cfloop query="emailTracking">
        <cfset arrayAppend(local.response
                          , { "timestamp": emailTracking.timestamp
                              , "sender": emailTracking.sender
                              , "recipient": emailTracking.recipient
                            }
                        )>
    </cfloop>

    <cfreturn local.response>

</cffunction>   

success: function(data) {
    data.forEach(function (item, index) {
        // for demo, log values in each row to console
        console.log(index, item.timestamp, item.sender);
    });
}