ColdFusionのデータをAjaxで使うには。
Ajaxでよく使われる形式として、JSON形式というものがあります。
こちらでCFJSONというコンポーネントがあることを知りました。なにかあったら利用してみたいと思います。
でも、データのやりとりであればCFWDDXタグは使えるのではないか？と思いました。
この本のサンプルを元に作成したものはこちらです。
その中で、「data2」というリンクがあります。
ID,NAME,TEL
が表示されます。
このデータは、以下のプログラムを元にしています。
qry_data.cfm
<cfsetting showDebugOutput="no" enableCFoutputOnly="yes">
<cfset qry_tmp=queryNew("ID,NAME,TEL","Integer,VarChar,VarChar")>
<cfset QueryAddRow(qry_tmp)>
<cfset QuerySetCell(qry_tmp, "ID", 1)>
<cfset QuerySetCell(qry_tmp, "NAME", "鈴木")>
<cfset QuerySetCell(qry_tmp, "TEL", "123")>
<cfset QueryAddRow(qry_tmp)>
<cfset QuerySetCell(qry_tmp, "ID", 2)>
<cfset QuerySetCell(qry_tmp, "NAME", "田中")>
<cfset QuerySetCell(qry_tmp, "TEL", "456")>
<cfset QueryAddRow(qry_tmp)>
<cfset QuerySetCell(qry_tmp, "ID", 3)>
<cfset QuerySetCell(qry_tmp, "NAME", "佐藤")>
<cfset QuerySetCell(qry_tmp, "TEL", "789")>
<cfoutput>
<cfwddx action="cfml2js" input="#qry_tmp#" topLevelVariable="aa"> </cfoutput>上記ソースを実行してみます。こちらをクリックしてください。
次にデータをセットする部分のJavascriptは以下のようになります。
if(target_url == 'qry_data.cfm'){
eval(text_data);//JavaScriptを実行
var tmp="<br><table><tr><td>ID</td><td>NAME</td><td>TEL</td></tr>";
for(i=0;i < aa.getRowCount();i++){
tmp = tmp + "<tr>";
tmp = tmp + "<td>" + aa.id[i] + "</td>";
tmp = tmp + "<td>" + aa.name[i] + "</td>";
tmp = tmp + "<td>" + aa.tel[i] + "</td>";
tmp = tmp + "</tr>";
}
tmp = tmp + "</table>";
content.innerHTML = tmp;
}どうでしょう。分かりやすいですよね。
ぜひ、お試しください。
