从 CFC 查询结果中填充 HTML Table 数据

Question

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

Ajax:

<script>
function PopulateEmailData(){

        $.ajax({
            type: "POST",
            data: $('##emailTicket').serialize(),
            url: "cfcs/emailData.cfc?method=getData&ticket_id=#url.ticketID#",
            beforeSend: function(){
                //$('.loader').show();
            },
            complete: function(){
                 //$('.loader').hide(3000);
            },
            success: function(data) {
                $("##timestampTD").append('emailTracking.timestamp'); 
                $("##senderTD").val('emailTracking.sender');
                $("##recipientTD").val('emailTracking.recipient');
                console.log("PopulateEmailData Called - Success");
            },
            error: function() {
                console.log("PopulateEmailData Called - Error");
            }
        })
    }
    console.log("PopulateEmailData Called");    
</script>

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

<cfcomponent>
    <cffunction name="getData" access="remote" returnType="query">
        <cfargument name="ticket_id" type="any" required="true">

        <!--- localize function variables --->
        <cfset var emailTracking = "">

        <cfquery name="emailTracking" datasource="#datasource#">
            SELECT *
            FROM  email_tracking
            WHERE ticket_id = <cfqueryparam value="#ARGUMENTS.ticket_id#" cfsqltype="cf_sql_varchar">
        </cfquery>

        <cfreturn emailTracking>
    </cffunction>
</cfcomponent>

我可以在控制台输出中看到正在返回我的查询数据。我想要做的是用结果填充 HTML table 数据。我正在尝试通过我的 AJAX 调用的成功函数来完成它。

这是我的HTMLtable

<table width="100%" class="email_tracking_table">
    <thead>
        <tr>
            <th>Timestamp</th>
            <th>Sender</th>
            <th>Recipient(s)</th>
        </tr>
    </thead>
    <tr>
        <td id="timestampTD"></td>
        <td id="senderTD"></td>
        <td id="recipientTD"></td>
    </tr>
</table>

但我看到的只是添加到 TD 元素的文本 'emailTracking.timestamp'，而不是重新调整的数据。我做错了什么？

Answer 1

问题

如果您的查询可以 return 多条记录，您的 JS 代码将需要遍历这些结果，为每个记录添加一个新的 <tr>。
将 JS 变量用引号引起来可以防止对其求值。所以 'emailTracking.timestamp'（注意引号）是一个 string，不是变量。
传递给 success() 函数的实际变量名为 data，而不是 "emailTracking.timestamp"。要访问查询数据，请使用 data 变量。
CFC 可能正在 return 查询，但格式不正确。 CF returns wddx format by default，您的 jQuery 代码无法正确处理。使用更兼容的格式，如 JSON.

分辨率

要请求 JSON 格式的响应，请将 returnFormat 参数添加到 ajax url:
```
?method=getData&returnFormat=json&....
```

将 jquery 响应 dataType 设置为 "json"，因此它会自动反序列化

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

虽然在url中加上?returnFormat=json就可以取回JSON，但是CF的默认查询格式非常...non-standard .因此，您可能希望将 CFC 修改为 return 结构数组。只是不要忘记将函数 return 类型更改为 "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>

通过这些更改，JS data 变量现在将包含一个结构数组，您可以遍历这些结构并轻松构建 HTML。

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

从 CFC 查询结果中填充 HTML Table 数据

Populate HTML Table Data from CFC Query Results

javascript

ajax

coldfusion

cfc