[PHP, JS]jQueryのAjaxによるPHP、Javascript間の送受信(JSON)

Share on Facebook
Bookmark this on Delicious
LINEで送る
Pocket

Ajax(非同期通信)を用いれば画面遷移なしでデータのやり取りができるため、最近では定番の技術として頻繁に用いられています。

今回は Javascript から JSON 形式のパラメータを POST で送信し、
PHP で処理した後、それを再び Javascript で受信する API のようなものを作ってみます。

・index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>Ajax</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
	$("#button").click(function(){
	
		var param = { "text": "Hello" };

		$.ajax({
			type: "post",
			url: "ajax.php",
			data: JSON.stringify(param),
			// crossDomain: true,
			dataType : "jsonp",
			scriptCharset: 'utf-8'
		}).done(function(data){
			alert(data.text);
		}).fail(function(XMLHttpRequest, textStatus, errorThrown){
			alert(errorThrown);
		});
	 });
});
</script> 
	
</head>

<body>
<input type="button" id="button" value="Hello" /></form>
</body>
</html>

・ajax.php

<?php
// Ajax以外からのアクセスを遮断
$request = isset($_SERVER['HTTP_X_REQUESTED_WITH']) ? strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) : '';
if($request !== 'xmlhttprequest') exit;

$json = file_get_contents('php://input');
$data = json_decode($json, true);

$text      = isset($data['text'])       ? $data['text']	    : "";
$callback  = isset($_GET['callback'])   ? $_GET["callback"] : "";
$callback  = htmlspecialchars(strip_tags($callback));

$param = array( 'text' => $text . ", World!" );

header('Content-type: text/javascript; charset=utf-8');
printf("{$callback}(%s)", json_encode( $param ));

出力結果

Hello, World!

「Hello」と書かれたボタンを押すと、JavaScript から PHP に「Hello」という文字列が送信されます。
PHP はそれに「, World!」という文字列を加えて返します。
Javascript は結果を受け取り「Hello, World!」と表示する流れです。

パラメータの受け渡しには JSON(JavaScript Object Notation) を利用しました。
PHP には JSON 読み書きに関する関数が充実しているので Javascript とデータの送受信をする場合は XML と並んでよく使われます。

参考:
http://www.learningjquery.com/2010/03/detecting-ajax-events-on-the-server/


Similar Posts:




  • This entry was posted in PHP, JavaScript and tagged , , , . Bookmark the permalink.

    コメントを残す

    メールアドレスが公開されることはありません。