背負い投げとENTER_FRAME

Icon

なんちゃってWebクリエイターがFlashやらActionScriptやらを淡々と書く。ときとき柔道の話しもする。

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;


このエントリーをはてなブックマークに追加  

Category: PHP

Tagged: , , ,

7 Responses

  1. surari より:

    Thank you !

  2. ご紹介有り難うございます。おかげで画面遷移せずにMySQLのクエリ検索結果が呼び出せる。

  3. Van より:

    I see you don’t monetize your website, there is one cool method to
    earn extra money, it will work with your website perfectly,
    just search in google for; tips and tricks by Fejlando

  4. はっきり分かれるものであるので購入には注意が必要。

  5. Lin89 より:

    Reading your website gave me a lot of interesting informations , it deserves to go viral, you need
    some initial traffic only. How to get initial traffic? Search
    for: masitsu’s effective method

  6. 例を挙げれば課題を思い出してください。
    予習は大体の所は「ワークブックの何ページから何ページまでやる。」という様にはんいが決まっていますよね。やらねばならないことが決まっていれば、気分が乗らないものの、とにかくやってやろう。という様子にもなります。そして、やり終えたときには、ちょっとした満足感も味わえたりして・・・ホームワークはいわばノルマのようなものです。受験学習を効率よく進めていくためにはこの目標を凄く
    意識することが必要です。ノルマが決定されていればすくなくともするしかありません。

Leave a Reply

中の人のプロフィール

柔道歴約20年だが諸理由で未だ初段。162cm、60kgくらいの軽量級。得意は背負い投げと巴投げ。2009年、左ヒザ前十字靭帯損傷。ただ今柔道復帰を企んでいる真っ最中。仕事では最近、ActionScriptを書いたり、WordPressをいじったりの日々が続いてる。@renowanにてつぶやいてる。

アーカイブ

Flicker

This movie requires Flash Player 9.0.0