Question

我有一个表单设置，我从列表中选择一个名称，调用CFC并针对该名称运行查询。然后我从该查询中返回一美元金额。

然后我尝试获取该金额并更改<input>元素的值。

我可以成功运行我的CFC并返回正确的值，但我的JQUERY不会更改输入字段的值。它跳过了我的成功：方法并直接进入我的错误：方法。

这是我的表单代码：

<cfselect class="required" queryPosition="below" query="get_ticket" display="company_name" name="customer_checkout" id="customer_checkout" tabindex="0" onchange="PopulateGrandTotal();" ><option>---Make A Selection---</option></cfselect>

<div id="grant_totalDIV" >
        <input type="number" name="grand_total_due"   id="grand_total_due"> 
</div>

这是我的CFC：

<cffunction name="getTotal" access="remote" returntype="any">
<cfargument name="customer_checkout" type="any" required="true">

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

<cfquery name="dataDetail" datasource="#datasource#" >
select grand_total
from service_ticket
where company_name = '#customer_checkout#'
</cfquery> 


<cfoutput query="dataDetail">

    <cfreturn dataDetail.grand_total>
</cfoutput>
</cffunction></cfcomponent>

这是JQuery：

<script>
function PopulateGrandTotal(){
    // Populate the customer alert DIV based on the customer selection
    console.log( $("#customer_checkout>option:selected").attr("Value") );

    $.ajax({
        url:'cfcs/grand_totalDIV.cfc?method=getTotal&returnformat=json',
        dataType: 'json',
        data: { customer_checkout: $("#customer_checkout>option:selected").attr("Value") },

        success: function(response) {
            console.log('Successfully ran JSON, now changing input value');
            $("#grand_total_due").val( response );

            console.log('Input value cahnged');

            },
        error: function(response){ 

                console.log('Error');

                }
      });
}
</script>

我的JSON回复：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>
<body>

</body>
274.00

有人可以帮忙吗？

Answer 1

看起来您只是返回文字，所以不要使用dataType: 'json',，因为那不是发送的内容。

您可以从ajax配置中删除该选项

否则，您需要json序列化结构并访问成功处理程序中的正确属性

Answer 2

（评论太长）

您还应该对齐返回类型，以便双方就返回的数据类型以及采用何种格式达成一致。如果您更喜欢返回纯文本，而不是JSON：

设置CFFunction以使用适当的返回类型，即returntype="numeric"或returntype="string"
然后通过提供returnformat参数告诉CF应该使用哪种格式，并使用dataType告诉jQuery它应该接收哪种类型的数据。如评论中所述，默认为intelligent guess: (xml, json, script, or html)。但是，提供它不会伤害任何东西，并明确指定它有助于避免无意间混淆，如初始json / text问题IMO。
```
$.ajax({
    url:'cfcs/grand_totalDIV.cfc?method=getTotal&returnformat=plain',
    dataType: 'text',
    ...
});   
```

此外，与您的错误无关，但有一些提示：

由于该功能实际上没有显示任何内容，因此不需要<cfoutput query="...">。只需返回单个值：<cfreturn dataDetail.grand_total>
如果函数需要customer_checkout的特定类型的值（即字符串，数字等），请在参数签名中指定它，而不是使用type="any"。
始终使用cfqueryparam来提高性能并防止SQL注入
不要忘记确定所有变量的范围，即arguments.customer_checkout而不是customer_checkout

使用CFC JSON结果填充输入字段

2 个答案: