callback関数が起動しない

新人プログラマーです。

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>住所１</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);

No.1 回答者： taloo 回答日時： 2012/12/26 16:18

eval()は、その結果（オブジェクト）が返されるわけではないです。

何が返されるのか、すみませんがわかりません。

var json;
eval('json='+request);

とするか、

var json=JSON.parseJSON(request);

としてみてください。
後者は古いブラウザでは動きません。

No.2 回答者： taloo 回答日時： 2012/12/26 16:26

調べてみたら、これでもいけるらしいです。

var json=eval('('+request+')');

-----------
ついでながら、補足。

evalは {id:1} という表記（ダブルクォーテーションなし、JavaScript表記）でも可能ですが、

{name: (function(){攻撃コード; return '山田';}) }

というようなデータでも、それを実行してしまいます。


データの内容を保証できない（訪問者による投稿を認めている）、またはエスケープ処理等をきっちりできない可能性があるなら、
セキュリティー上、JSON.parse()をお勧めします。

No.3 回答者： taloo 回答日時： 2012/12/27 12:58

すみません、No.1訂正です。

var json=JSON.parse(request);

です。

No.4 回答者： shockatz 回答日時： 2012/12/27 16:07

横入り失礼

$.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でもそんな泥臭いことはしないね。