jQueryからPHPを実行して処理を行う非同期処理

2013/07/11

記事概要

jQuery からサーバーサイドスクリプトを実行

jQuery はクライアント上で動くプログラムです。
そのため、jQuery ではサーバーサイドで行う処理はできません。

サーバーサイドで処理を行いたい場合は、リクエストを送信してサーバーサイドのプログラムを実行し、結果を取得する必要があります。
つまり、画面遷移が必要になる訳です。

しかし、ボタンクリック時に画面遷移せずに、データを取得・表示したいときなどありますよね。
そういった場合は、jQuery からサーバーサイドのプログラムを実行してその結果を取得する非同期処理を行うことで実現することができます。

これを行うには2つの方法があり、1つ目は ajax を使用する方法、2つ目は post を使用する方法です。
post の方が分かりやすいと思うため、今回は post を使用した方法を紹介します。

jQuery.post() でPOST送信

jQuery.post() を使用して、非同期処理をおこないます。

jQuery.post(url, data, callback, type)

引数は最大で上記の4つあり、それぞれ以下を設定します。

url

実行するプログラムファイルのURLを記述します。
パスでも問題ありません。

data

URLで指定したプログラムにPOST送信するデータを指定します。
キーと値の組み合わせとなります。
複数指定する場合は、以下のように「,」で区切ります。

{ id: site_id, url: site_url }

callback

callback 関数を記述します。

function(data, textStatus) {
if( textStatus == 'success') {
//処理
}
}

data には、プログラムから送られたデータが格納されています。
textStatus には、処理に成功した場合に "success" が格納されています。

type

送信データの形式を指定します。
JSON、XMLなどがあります。

サンプルコード

jQuery の書き方


<script type="text/javascript">
<!--
var site_id1 = "1";
var site_url1 = "http://www.google.co.jp/";

$(function () {
	$.post("get_site_title.php",
		{ id: site_id1, url: site_url1 },
		function(data, textStatus) {
			if( textStatus == 'success') {
				$('#site_title' + data['id']).html(data['title']);
			}
		}
		,'json'
	);
});
-->
</script>

上記では、サイトのURLをプログラムに渡して、取得した値を #site_title1 に表示しています。
site_id もプログラムに渡していますが、特に意味はありません。
複数のデータを引き渡せるよって意味で記述しているだけです。

PHP の書き方


<?php
$id = $_POST['id'];
$url = $_POST['url'];

$buff=join(@file($url));

$encode = mb_detect_encoding($buff, 'eucjp-win, UTF-8, sjis-win');
$buff = mb_convert_encoding($buff, 'UTF-8', $encode);

preg_match('/<title>(.*?)<\/title>/is',$buff,$title);

$json['id'] = print_r($id,true);
$json['title'] = print_r($title[1],true);
echo json_encode($json);
?>

URL からタイトルを取得して返しています。
jQuery.post() は、html通信でページを読込むため、echo で返すデータを出力しています。

PbTimes 情報誌