如何使用JSON格式的jQueryAjax从.cfm页面输出查询?
我试图使用json格式的jquery从.cfm页面输出查询。有人能告诉我我错了什么吗 编辑:答案 编辑:刚刚发布了我的cfc代码 编辑:我当前收到一个错误如何使用JSON格式的jQueryAjax从.cfm页面输出查询?,jquery,ajax,coldfusion,Jquery,Ajax,Coldfusion,我试图使用json格式的jquery从.cfm页面输出查询。有人能告诉我我错了什么吗 编辑:答案 编辑:刚刚发布了我的cfc代码 编辑:我当前收到一个错误 SyntaxError: JSON.parse: unexpected character. test.cfm输出如下所示 {"COLUMNS":["TEAM"],"DATA":[["Dallas Cowboys"],["NY Giants"],["Philadelphia Eagles"],["Washington Redskins"]]
SyntaxError: JSON.parse: unexpected character.
test.cfm输出如下所示
{"COLUMNS":["TEAM"],"DATA":[["Dallas Cowboys"],["NY Giants"],["Philadelphia Eagles"],["Washington Redskins"]]}
在我的.html页面中,我有
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#runQuery").click(function () {
$.ajax({
type: "GET",
url: "./test.cfm",
dataType: "json",
success: function (resp, textStatus, jqXHR) {
buildResultsTable(resp);
},
error: function (jqXHR, textStatus, errorThrown)
{
alert(errorThrown);
}
});
});
function buildResultsTable(resp)
{
var tmp_html = $("<tr />");
var j = 0;
$("#results").html("");
for (var i = 0; i < resp["COLUMNS"].length; i++)
{
var tmp_th = $("<th />");
tmp_th.text(resp["COLUMNS"][i]);
tmp_html.append(tmp_th);
}
$("#results").append(tmp_html);
for (j = 0; j < resp["DATA"].length; j++)
{
tmp_html = $("<tr />");
for (var i = 0; i < resp["DATA"][j].length; i++)
{
var tmp_td = $("<td />");
tmp_td.text(resp["DATA"][j][i]);
tmp_html.append(tmp_td);
}
$("#results").append(tmp_html);
}
}
})
</script>
</head>
<body>
<input type="button" id="runQuery" value="Show Teams" />
<input type="text" name="name">
<table id="results" cellspacing="0" cellpadding="0">
</table>
</body>
</html>
在我的test.cfm调用页面中
<cfinvoke
component="learncf_jquery"
method="getAllTeams"
returnVariable="getItems">
</cfinvoke>
<cfoutput>#SerializeJSON(getItems)#</cfoutput>
learncf_jquery.cfc
<cfcomponent name="jQueryExample" output="false">
<cffunction name="getAllPlayers" output="false" access="private" returntype="query">
<cfset var qAllPlayers = queryNew('playerName, team') />
<cfset queryAddRow(qAllPlayers, 40) />
<!--- add 10 Giants players to the "database" --->
<cfset querySetCell(qAllPlayers, 'playerName', 'Alford, Jay', 1) />
<cfset querySetCell(qAllPlayers, 'team', 'NY Giants', 1) />
<cfset querySetCell(qAllPlayers, 'playerName', 'Barden, Ramses', 2) />
<cfset querySetCell(qAllPlayers, 'team', 'NY Giants', 2) />
<cfset querySetCell(qAllPlayers, 'playerName', 'Beckum, Travis', 3) />
<cfset querySetCell(qAllPlayers, 'team', 'NY Giants', 3) />
<cfset querySetCell(qAllPlayers, 'playerName', 'Bernard, Rocky', 4) />
<cfset querySetCell(qAllPlayers, 'team', 'NY Giants', 4) />
<cfset querySetCell(qAllPlayers, 'playerName', 'Blackburn, Chase', 5) />
<cfset querySetCell(qAllPlayers, 'team', 'NY Giants', 5) />
<cfset querySetCell(qAllPlayers, 'playerName', 'Boss, Kevin', 6) />
<cfset querySetCell(qAllPlayers, 'team', 'NY Giants', 6) />
<cfset querySetCell(qAllPlayers, 'playerName', 'Bradshaw, Ahmad', 7) />
<cfset querySetCell(qAllPlayers, 'team', 'NY Giants', 7) />
<cfset querySetCell(qAllPlayers, 'playerName', 'Canty, Chris', 8) />
<cfset querySetCell(qAllPlayers, 'team', 'NY Giants', 8) />
<cfset querySetCell(qAllPlayers, 'playerName', 'Diehl, David', 9) />
<cfset querySetCell(qAllPlayers, 'team', 'NY Giants', 9) />
<cfset querySetCell(qAllPlayers, 'playerName', 'Feagles, Jeff', 10) />
<cfset querySetCell(qAllPlayers, 'team', 'NY Giants', 10) />
<!--- add 10 Cowboys players to the "database" --->
<cfset querySetCell(qAllPlayers, 'playerName', 'Adams, Flozell', 11) />
<cfset querySetCell(qAllPlayers, 'team', 'Dallas Cowboys', 11) />
<cfset querySetCell(qAllPlayers, 'playerName', 'Austin, Miles', 12) />
<cfset querySetCell(qAllPlayers, 'team', 'Dallas Cowboys', 12) />
<cfset querySetCell(qAllPlayers, 'playerName', 'Brown, Courtney', 13) />
<cfset querySetCell(qAllPlayers, 'team', 'Dallas Cowboys', 13) />
<cfset querySetCell(qAllPlayers, 'playerName', 'Choice, Tashard', 14) />
<cfset querySetCell(qAllPlayers, 'team', 'Dallas Cowboys', 14) />
<cfset querySetCell(qAllPlayers, 'playerName', 'Colombo, Marc', 15) />
<cfset querySetCell(qAllPlayers, 'team', 'Dallas Cowboys', 15) />
<cfset querySetCell(qAllPlayers, 'playerName', 'Davis, Leonard', 16) />
<cfset querySetCell(qAllPlayers, 'team', 'Dallas Cowboys', 16) />
<cfset querySetCell(qAllPlayers, 'playerName', 'Jones, Felix', 17) />
<cfset querySetCell(qAllPlayers, 'team', 'Dallas Cowboys', 17) />
<cfset querySetCell(qAllPlayers, 'playerName', 'Kitna, Jon', 18) />
<cfset querySetCell(qAllPlayers, 'team', 'Dallas Cowboys', 18) />
<cfset querySetCell(qAllPlayers, 'playerName', 'Procter, Corey', 19) />
<cfset querySetCell(qAllPlayers, 'team', 'Dallas Cowboys', 19) />
<cfset querySetCell(qAllPlayers, 'playerName', 'Romo, Tony', 20) />
<cfset querySetCell(qAllPlayers, 'team', 'Dallas Cowboys', 20) />
<!--- add 10 Eagles players to the "database" --->
<cfset querySetCell(qAllPlayers, 'playerName', 'Akers, David', 21) />
<cfset querySetCell(qAllPlayers, 'team', 'Philadelphia Eagles', 21) />
<cfset querySetCell(qAllPlayers, 'playerName', 'Baskett, Hank', 22) />
<cfset querySetCell(qAllPlayers, 'team', 'Philadelphia Eagles', 22) />
<cfset querySetCell(qAllPlayers, 'playerName', 'Booker, Lorenzo', 23) />
<cfset querySetCell(qAllPlayers, 'team', 'Philadelphia Eagles', 23) />
<cfset querySetCell(qAllPlayers, 'playerName', 'Clemons, Chris', 24) />
<cfset querySetCell(qAllPlayers, 'team', 'Philadelphia Eagles', 24) />
<cfset querySetCell(qAllPlayers, 'playerName', 'Demps, Quintin', 25) />
<cfset querySetCell(qAllPlayers, 'team', 'Philadelphia Eagles', 25) />
<cfset querySetCell(qAllPlayers, 'playerName', 'Feeley, A.J.', 26) />
<cfset querySetCell(qAllPlayers, 'team', 'Philadelphia Eagles', 26) />
<cfset querySetCell(qAllPlayers, 'playerName', 'Hobbs, Ellis', 27) />
<cfset querySetCell(qAllPlayers, 'team', 'Philadelphia Eagles', 27) />
<cfset querySetCell(qAllPlayers, 'playerName', 'Jackson, DeSean', 28) />
<cfset querySetCell(qAllPlayers, 'team', 'Philadelphia Eagles', 28) />
<cfset querySetCell(qAllPlayers, 'playerName', 'Klecko, Dan', 29) />
<cfset querySetCell(qAllPlayers, 'team', 'Philadelphia Eagles', 29) />
<cfset querySetCell(qAllPlayers, 'playerName', 'McNabb, Donovan', 30) />
<cfset querySetCell(qAllPlayers, 'team', 'Philadelphia Eagles', 30) />
<!--- add 10 Redskins players to the "database" --->
<cfset querySetCell(qAllPlayers, 'playerName', 'Alexander, Lorenzo', 31) />
<cfset querySetCell(qAllPlayers, 'team', 'Washington Redskins', 31) />
<cfset querySetCell(qAllPlayers, 'playerName', 'Campbell, Jason', 32) />
<cfset querySetCell(qAllPlayers, 'team', 'Washington Redskins', 32) />
<cfset querySetCell(qAllPlayers, 'playerName', 'Clark, Devin', 33) />
<cfset querySetCell(qAllPlayers, 'team', 'Washington Redskins', 33) />
<cfset querySetCell(qAllPlayers, 'playerName', 'Cooley, Chris', 34) />
<cfset querySetCell(qAllPlayers, 'team', 'Washington Redskins', 34) />
<cfset querySetCell(qAllPlayers, 'playerName', 'Dixon, Antonio', 35) />
<cfset querySetCell(qAllPlayers, 'team', 'Washington Redskins', 35) />
<cfset querySetCell(qAllPlayers, 'playerName', 'Fletcher, London', 36) />
<cfset querySetCell(qAllPlayers, 'team', 'Washington Redskins', 36) />
<cfset querySetCell(qAllPlayers, 'playerName', 'Hackett, D.J.', 37) />
<cfset querySetCell(qAllPlayers, 'team', 'Washington Redskins', 37) />
<cfset querySetCell(qAllPlayers, 'playerName', 'Randle El, Antwaan', 38) />
<cfset querySetCell(qAllPlayers, 'team', 'Washington Redskins', 38) />
<cfset querySetCell(qAllPlayers, 'playerName', 'Smoot, Fred', 39) />
<cfset querySetCell(qAllPlayers, 'team', 'Washington Redskins', 39) />
<cfset querySetCell(qAllPlayers, 'playerName', 'Suisham, Shaun', 40) />
<cfset querySetCell(qAllPlayers, 'team', 'Washington Redskins', 40) />
<cfreturn qAllPlayers />
</cffunction>
<cffunction name="getAllTeams" access="remote" output="false" returntype="query">
<cfset var allPlayers = getAllPlayers() />
<cfset var qGetAllTeams = "" />
<cfquery name="qGetAllTeams" dbtype="query">
SELECT DISTINCT team FROM allPlayers ORDER BY team
</cfquery>
<cfreturn qGetAllTeams />
</cffunction>
您的test.cfm页面需要将getItems输出为JSON。尝试将此添加到test.cfm:
<cfoutput>
#SerializeJSON(getItems)#
</cfoutput>
/test.cfm:
<cfoutput>
#SerializeJSON(getItems)#
</cfoutput>
<cfinvoke
component="learncf_jquery"
method="getAllTeams"
returnVariable="getItems">
</cfinvoke>
<cfoutput>#SerializeJSON(getItems)#</cfoutput>
以下是我为匹配您的示例而修改的一些代码:
我的HTML:
<table id="results" cellspacing="0" cellpadding="0">
</table>
还有我的javascript,它将查询结果放入表中:
$("#runQuery").click(function () {
$.ajax({
type: "GET",
url: "./test.cfm",
dataType: "json",
success: function (resp, textStatus, jqXHR) {
buildResultsTable(resp);
},
error: function (jqXHR, textStatus, errorThrown)
{
alert(errorThrown);
}
});
});
function buildResultsTable(resp)
{
var tmp_html = $("<tr />");
var j = 0;
$("#results").html("");
for (var i = 0; i < resp["COLUMNS"].length; i++)
{
var tmp_th = $("<th />");
tmp_th.text(resp["COLUMNS"][i]);
tmp_html.append(tmp_th);
}
$("#results").append(tmp_html);
for (j = 0; j < resp["DATA"].length; j++)
{
tmp_html = $("<tr />");
for (var i = 0; i < resp["DATA"][j].length; i++)
{
var tmp_td = $("<td />");
tmp_td.text(resp["DATA"][j][i]);
tmp_html.append(tmp_td);
}
$("#results").append(tmp_html);
}
}
您还可以让CF以json格式从CFC返回查询: 这可能与在其上放置serialize函数相同 即
你已经重复了两次你的成功经验;可能是复制/粘贴错误。您还应该确保使用var关键字在函数范围内声明jsonOBJ,而不是在全局范围内声明。@ken谢谢,我现在正在尝试Jake的示例代码。看起来不错-它在JSONLint.com上进行验证。一定是别的东西。你能检查一下我的json输出吗?我在原始帖子中添加了它。是的,我将它粘贴到了jsonlint.com中,正如我所说,它进行了验证。我刚刚更新了jquery库。希望这是我添加的正确版本,json格式看起来如何。我在原来的帖子里加的。