
新人プログラマーです。
Javascript/PHP/MySQLで検索→リスト表示のプログラムを作っています。
Javascriptの中で、Ajax通信は行うようですが、callバック関数が起動しません。
ブレークポイントを設定しても★★のところで終了してしまい、function callback(request)が
起動しない状態です。
以前も似たようなことがあり(そのときはJASONの形式が不正でうまくcallback関数が起動しなかった)、この掲示板で助けて頂いたのですが、
PHP側を丁寧に見てみましたが、データベースの検索はちゃんとできて、JSONの形式で渡せているようです。
コンソールには
[{"id":"1","customerName":"山田 アヤ","category":"果物","jusyo1":"東京都新宿区新宿","latestDate":"2012-12-22","reserveDate":"2012-12-22"},{"id":"2","customerName":"田中 かおる","category":"野菜","jusyo1":"東京都中央区銀座","latestDate":"2012-12-10","reserveDate":"2012-12-31"}]
と表示されていますので、JASONは生成されていると判断しました。
なぜcallバック関数が起動しないのか、どなたか教えて下さい。
よろしくおねがいします。
【Javascript側】
// 一覧検索
function doAction(){
var category = $('#category').val();
// Ajax通信
★★ $.getJSON('code/CustomerList2.php', {"category":category}, callback);
}
// 一覧表示用callback関数
function callback(request){
console.log(request);
var json = eval(request);
var res = '';
for (var i = 0; i < json.length; i++){
res += '<tr>'
+ '<td>' + json[i].customerName + '</td>'
+ '<td align="center">' + json[i].category + '</td>'
+ '<td>' + json[i].jusyo1 + '</td>'
+ '<td align="center">' + json[i].latestDate + '</td>'
+ '<td align="center">' + json[i].reserveDate + '</td>'
+ '<td align="center"><a href="customerdetail.html?id=' + json[i].id + '">詳細</td>'
+ '</tr>';
}
var obj = document.getElementById("datatable");
obj.innerHTML ='<tr><td>お客様名</td><td>分類</td><td>住所1</td><td>最終来店日</td><td>ご予約日</td><td>詳細</td></tr>'
+ res;
}
//-->
【PHP側】
if ($category == 'すべて'){
$sql = "SELECT * FROM tbl_customer" ;
}else{
$sql = "SELECT * FROM tbl_customer WHERE category = '" .$category. "'";
}
$res = mysql_query($sql, $conn);
print "res==="."$res<br />";
$result = "[";
while($row = mysql_fetch_array($res)){
$result = $result. "{\"id\":\"" .$row["customerId"].
"\",\"customerName\":\"" .$row["customerName"].
"\",\"category\":\"" .$row["category"].
"\",\"jusyo1\":\"" .$row["jusyo1"].
"\",\"latestDate\":\"" .$row["latestDate"].
"\",\"reserveDate\":\"" .$row["reserveDate"].
"\"},";
}
print "1)result==="."$result<br />";
$len = strlen($result);
if($len != 1){
$result = substr($result,0,($len - 1)); // 最後の「,」を切り取る
}
$result = $result. "]";
print "2)result==="."$result<br />";
// 出力
echo $result;
mysql_free_result($res);
A 回答 (4件)
- 最新から表示
- 回答順に表示
No.4
- 回答日時:
横入り失礼
$.getJSONというメソッドは、$.Ajaxメソッドを簡略化したもので、GETメソッドでJSON形式のデータを取得するためのもの。
なのに、コールバックメソッドに、var json = eval(request);というステートメントがあるのは変ではないか?
これだと、JSONではなくて文字列を期待していることになる。エラーの原因はきっとそれ。
JSONだと、受信した時点で、JavaScriptのオブジェクトに変換される。
ということで、
・サーバサイドで明示的にContent-Typeを、"application/json"にセットする(おそらく抜けている)
・コールバックは
function callback(json){
....以下省略....
}
と、直接オブジェクトで受ける。
(蛇足)
jsonの処理を見ていると、いきなりArrayで受けているようだけど、明示的にオブジェクトで受けるほうが望ましい。もちろん、サーバサイドもそのように吐いて。
{
"result":[{"id":1,"customerName":"山田アヤ", ...},{}...]
}
のようにして、json.resultでアクセスするようにするのが、他のパラメタも付加できるし通っぽい。
どうしても文字列で受けたいのであれば、$.Ajaxで呼び出し、戻り値のtypeを"text"とする。
jsonなんてよくわからなかった時代は、jsのリテラル表現みたいな文字列を返して、eval()していた。
いまどきは、jsonpでもそんな泥臭いことはしないね。
No.2
- 回答日時:
調べてみたら、これでもいけるらしいです。
var json=eval('('+request+')');
-----------
ついでながら、補足。
evalは {id:1} という表記(ダブルクォーテーションなし、JavaScript表記)でも可能ですが、
{name: (function(){攻撃コード; return '山田';}) }
というようなデータでも、それを実行してしまいます。
データの内容を保証できない(訪問者による投稿を認めている)、またはエスケープ処理等をきっちりできない可能性があるなら、
セキュリティー上、JSON.parse()をお勧めします。
No.1
- 回答日時:
eval()は、その結果(オブジェクト)が返されるわけではないです。
何が返されるのか、すみませんがわかりません。
var json;
eval('json='+request);
とするか、
var json=JSON.parseJSON(request);
としてみてください。
後者は古いブラウザでは動きません。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
特定<table>内の<td>の色を変える
-
プルダウンで選択すると、DBの...
-
ハイパーリンクを別ウインドウ...
-
かなりなお願い!!野球部のス...
-
jqueryで表に連番No.を追加したい
-
jQueryで行の移動
-
チェックボックスにチェックが...
-
CSVデータをツリー表示させたい
-
テーブルで複数行をまとめて非...
-
return trueとreturn falseの用...
-
<input>の選択肢をプルダウンメ...
-
selectを変更不可にしたい
-
ラジオボタンが選択されたらテ...
-
onclickをEnterキーでも行いたい
-
onchangeイベントを強制的に発...
-
チェックボックスのON/OFFでVal...
-
【javascript・PHP】プルダウン...
-
チェックボックス付きのテーブ...
-
データベースからのarray を j...
-
slickのレスポンシブ > center...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
プルダウンで選択すると、DBの...
-
ハイパーリンクを別ウインドウ...
-
tableの任意行にfocusをあてる
-
特定<table>内の<td>の色を変える
-
一覧から選択した行の行番号を...
-
CSVデータをツリー表示させたい
-
テーブルの項目の値取得
-
JavaScriptでテーブルをクリッ...
-
至急!GetElementById でtdの...
-
jspでのArrayListの値の表示
-
JavaScriptで特定のtdタグにcla...
-
javascript クリックすると、あ...
-
ビンゴゲームの作成
-
【UWSC】HTML内のある部分を抽...
-
クリックされた罫表セルの行番...
-
チェックボックスにチェックが...
-
まとめてセルの色を変えたい
-
指定した要素を含んだテキスト...
-
VBScriptの繰り返し文について
-
テーブル内に表示されている数...
おすすめ情報