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

问题描述

我有一个调用 CFC 的 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 查询我的数据库： 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 表格数据。我试图通过我的 AJAX 调用的成功功能来做到这一点。

这是我的 HTML 表格

<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”，而不是重新调整的数据。我究竟做错了什么？

标签： javascriptajaxcoldfusioncfc

解决方案

问题

如果您的查询可以返回多条记录，您的 JS 代码将需要遍历这些结果，<tr>为每条记录添加一个新记录。
用引号包裹一个 JS 变量可以防止它被评估。所以'emailTracking.timestamp'（注意引号）是一个字符串，而不是一个变量。
传递给success()函数的实际变量名为data，而不是“emailTracking.timestamp”。要访问查询数据，请使用data变量。
CFC 可能会返回一个查询，但它的格式不正确。CF默认返回 wddx 格式，您的 jQuery 代码将无法正确处理。使用更兼容的格式，例如 JSON。

解析度

要请求 JSON 格式的响应，请将returnFormat参数添加到 ajax url：
```
?method=getData&returnFormat=json&....
```
将 jquery 响应数据类型设置为“json”，因此它会自动反序列化
```
    ...
    type: "POST",
    dataType: "json",
    url: "..."
    ...
```

虽然添加?returnFormat=json到 url 足以返回 JSON，但 CF 的默认查询格式非常……非标准。因此，您可能希望修改 CFC 以改为返回结构数组。只是不要忘记将函数返回类型更改为“数组”。

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

通过这些更改，JSdata变量现在将包含一个结构数组，您可以通过这些结构轻松地循环并构建您的 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);
    });
}

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

问题描述

解决方案

推荐阅读