5月 11, 2011
jQuery.ajaxで簡単に非同期通信
やっばりイマドキっぽく、jQuery.ajaxで非同期通信しよう。結構簡単にできたけど、PHPから配列をJavaScriptに戻す作法でつまずいた。普通にPHPでゲットした配列（多次元連想）をそのままechoで返すと、jQueryの方がどうしても解析できなかった。
$result = json_encode($result); echo $result;
配列をエンコードしておけば、問題解決。
ローカルのMAMP環境だとajaxのパラメータに「dataType: ‘json’」が必要だったけど、ロリポップのサーバーだと消さないといけない。そのかわりに取得してきた配列をJSON.parse()を掛ける必要がある。
「送信」を押すと「getAr.php」を読み込んで、PHPから配列が帰ってきたら、テーブルにあるもとの行を全部消して、新しいデータを差し替える。PHPファイルは本当はMySQLとかでデータを取得することを想定するけど、サンプルはとりあえず適当な配列を作って返す。
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>jQureyでAJAX</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
// ここらへんはjQurey
$( function() {
$("*[name=btn]").click(
function() {
var $keyword = '';
$.ajax({
url: "./getAr.php",
type: "POST",
data: { val : $keyword }, // 検索など引数を渡す必要があるときこれを使う
//dataType: 'json', // サーバーなどの環境によってこのオプションが必要なときがある
success: function(arr) {
// 自分の環境だと帰ってきた配列をパスしないとだめ。
// ローカルだとそのまま使えた。
var parseAr = JSON.parse( arr );
$("p").text('検索結果：'+ parseAr.length+'件');
reWriteTable(parseAr);
}
});
}
);
});
// テーブルを書き換える関数
function reWriteTable( response )
{
// 元にある行を削除
$("#list tr").remove();
// 取得したデータを行に入れる
for (var i=0; i< response.length; i++) {
$("#list").append(
$('<tr>').append(
$('<td class="name">').text(response[i]['name'])
).append(
$('<td class="age">').text(response[i]['age'])
).append(
$('<td class="address">').text(response[i]['address'])
)
);
}
}
</script>
</head>
<body>
<div><a href="javascript:void(0)" name="btn">送信</a></div><br/>
<p>返り値</p>
<table id="list" border="1">
<tr><td class="name">花子</td><td class="age">7</td><td class="address">目黒区</td></tr>
<tr><td class="name">太郎</td><td class="age">5</td><td class="address">大田区</td></tr>
<tr><td class="name">まーくん</td><td class="age">13</td><td class="address">杉並区</td></tr>
</table>
<br/>
</body>
</html>
PHP部分（getAr.php）
<?php
// この変数はMySQLの検索用クリエなどに使えば良い
$target = $_POST['val'];
// 本当はMySQLなどデータベースから情報を引っ張ってくるけど、
// ここはとりあえず適当に多次元連想配列を作って返す。
$result = array();
$result[] = array('name'=>'織田信長','age'=>'35','address'=>'尾張');
$result[] = array('name'=>'徳川家康','age'=>'30','address'=>'三河');
$result[] = array('name'=>'武田信玄','age'=>'29','address'=>'甲斐');
// 配列をエンコードしないと化けるみたい。
$result = json_encode($result);
echo $result;
Thank you !
ご紹介有り難うございます。おかげで画面遷移せずにMySQLのクエリ検索結果が呼び出せる。
ｄｆｄ