如何使用JSON格式的jQuery AJAX從.cfm頁面輸出查詢？

我想從jQuery格式的jQuery使用.cfm頁面輸出查詢。有人能告訴我我的東錯嗎？如何使用JSON格式的jQuery AJAX從.cfm頁面輸出查詢？

編輯：答案here

編輯：只是張貼了我的CFC代碼

編輯：我目前得到一個錯誤。

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>

來源

2012-02-08 isurfbecause

您已經重複你的成功處理程序兩次;可能是複製/粘貼錯誤。您還應該確保使用'var'關鍵字在函數的範圍內聲明'jsonOBJ'，而不是全局範圍。 – 2012-02-08 15:36:47

@ken謝謝，我正在嘗試Jake的示例代碼。 – isurfbecause 2012-02-08 19:38:01

./test.cfm：

<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); 
      } 

    }

來源

2012-02-08 18:16:38

看起來很好 - 它在JSONLint.com上進行驗證。必須是別的東西。 – 2012-02-08 19:14:34

你能檢查我的json輸出嗎？我在原始文章中添加了它。 – isurfbecause 2012-02-08 19:16:14

是的，我把它粘貼到jsonlint.com，就像我說的，它驗證。 – 2012-02-08 19:17:49

你test.cfm頁面需要輸出getItems爲JSON。嘗試添加這test.cfm：

<cfoutput> 
#SerializeJSON(getItems)# 
</cfoutput>

來源

2012-02-08 15:14:04 duncan

我補充說，json格式看起來如何。我在原始文章中添加了它。 – isurfbecause 2012-02-08 19:15:13

你也可以有CF從CFC JSON格式返回查詢：（這可能是一樣的把序列化功能就可以了）

即

<cffunction access="remote" name="SelectedSubCats" output="false" returntype="query" returnformat="json"> 
<cfargument name="catID" required="yes" type="numeric" default="-23" /> 
<cfquery name="SelectedSubCats" datasource="$$$" > 
SELECT * FROM subcategory 
WHERE <cfif Arguments.catID neq -23>topCatID = #Arguments.catID#</cfif> 
ORDER BY subcat 
</cfquery> 
<cfreturn SelectedSubCats> 
</cffunction>

來源

2012-02-09 21:48:31 illiquent

如何使用JSON格式的jQuery AJAX從.cfm頁面輸出查詢？

回答

相關問題