使用 CFC JSON 结果填充输入字段
Populating Input Field With CFC JSON Results
我有一个表单设置,我从列表中选择一个名称,调用 CFC 并运行查询该名称。然后我 return 从该查询中获得一美元。
然后我尝试获取该金额并更改 <input>
元素的值。
我可以成功 运行 我的 CFC 和 return 正确的值,但是我的 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
有人能帮忙吗?
您似乎只是在返回文本,所以不要使用 dataType: 'json',
,因为这不是发送的内容。
您可以从 ajax 配置中删除该选项
否则您将需要 json 序列化一个结构并在您的成功处理程序中访问正确的 属性
(评论太长)
您还应该对齐 return 类型,这样双方就 return 编辑的数据类型和格式达成一致。如果您更喜欢 return 纯文本,而不是 JSON:
- 设置 CFFunction 以使用适当的 return 类型,即
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="...">
。只是 return 单个值:<cfreturn dataDetail.grand_total>
- 如果函数需要
customer_checkout
的特定类型的值(即字符串、数字等),请在参数签名中指定它,而不是使用 type="any"
.
- 始终使用
cfqueryparam
来提高性能并防止 SQL 注入
- 不要忘记限定所有变量的范围,即
arguments.customer_checkout
而不是 customer_checkout
我有一个表单设置,我从列表中选择一个名称,调用 CFC 并运行查询该名称。然后我 return 从该查询中获得一美元。
然后我尝试获取该金额并更改 <input>
元素的值。
我可以成功 运行 我的 CFC 和 return 正确的值,但是我的 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
有人能帮忙吗?
您似乎只是在返回文本,所以不要使用 dataType: 'json',
,因为这不是发送的内容。
您可以从 ajax 配置中删除该选项
否则您将需要 json 序列化一个结构并在您的成功处理程序中访问正确的 属性
(评论太长)
您还应该对齐 return 类型,这样双方就 return 编辑的数据类型和格式达成一致。如果您更喜欢 return 纯文本,而不是 JSON:
- 设置 CFFunction 以使用适当的 return 类型,即
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="...">
。只是 return 单个值:<cfreturn dataDetail.grand_total>
- 如果函数需要
customer_checkout
的特定类型的值(即字符串、数字等),请在参数签名中指定它,而不是使用type="any"
. - 始终使用
cfqueryparam
来提高性能并防止 SQL 注入 - 不要忘记限定所有变量的范围,即
arguments.customer_checkout
而不是customer_checkout