[WordPress]Ajaxを使ってデータをPOST！非同期にデータをやり取りする方法

こんにちは。でんすけ（@notgeek_densuke）です。

今回はWordPressブログで、Ajaxを使ってデータをやり取りする方法をまとめてみます。

Ajaxとは

そもそもAjaxとは？

ごくごく簡単にいうと、
JavaScriptを使って非同期通信を行うことです。

「Asynchronous JavaScript + XML」の略称。
非同期の、JavaScriptの、XMLです。

ちなみに、似たような技術としてPOSTメッセージの使い方の記事も以前書きましたが。

[WordPress]POSTメッセージの送信、受信。ユーザーからのデータを受け取って動的なサイト作り

HTTPのPOSTメッセージの場合、あるURLに対して送信すると、
ブラウザのページがそのURLに遷移するため、ブラウザの表示がリロードされます。

しかしAjaxを使えば、ブラウザのリロードなしにデータをやり取りし、JavaScriptでページの表示を書き換えることができるのです！

有名なところでいうとGoogle Mapですね。
あれ、地図のデータを取得するのにその都度通信が発生しているはずですが、ページをリロードせずに使えますよね。
そこで使われているのがAjaxです。

手軽なものであれば、ちょっとしたコードだけで作ることができます。
ということで、早速やってみましょう。

WordPressでAjaxを使うには

WordPressでAjaxを使うには、以下の実装が必要です。

・Ajaxリクエスト先のURLの準備
・Ajaxをリクエストするクライアント側の実装
・Ajaxリクエスト先での処理の実装

それぞれ順番にやっていきます。

WordPressのAjaxリクエストURL準備

まずは、AjaxリクエストURLの準備です。

WordPressでは、AjaxでリクエストするURLがすでに準備されています。
なので、それをJavaScriptで使えるようにしておいてあげよう、ということ。

functions.phpにこんな感じで書けばOK。

function add_my_ajaxurl() {
?>
    <script>
        var ajaxurl = '<?php echo admin_url( 'admin-ajax.php'); ?>';
    </script>
<?php
}
add_action( 'wp_head', 'add_my_ajaxurl', 1 );

WordPressでは、「admin-ajax.php」というphpファイルでAjaxのリクエストを受け付けてくれます。

「admin-ajax.php」へのURLを「ajaxurl」という変数に格納したので、
後々JavaScript側で使えるようになりました。

Ajaxをリクエストするクライアント側の実装

つづいて、クライアント側（＝JavaScript側）です。

ユーザーフォームを作って、ユーザーにデータを入力してもらい、
そのデータを先ほど準備したURL「admin-ajax.php」に対して送信することを考えます。

<!-- 送信データをユーザーに入力してもらうためのフォーム -->
<div id="posttest" style="border: solid 1px #8e8e8e; border-radius: 5px; padding: 10px;">
	<form id="testform">
		<div>
			お名前：<input type="text" name="yourname" maxlength="30" required>
		</div>
		<div>
			性別：
			<input type="radio" name="sex" id="input_man" value="man" checked>
				<label for="input_man">男性</label>
			<input type="radio" name="sex" id="input_woman" value="woman">
				<label for="input_woman">女性</label>
		</div>
		<div>
			年齢：<input type="number" name="age" required>
		</div>
		<div>
			好きな食べ物：
			<input type="checkbox" name="food[]" id="input_udon" value="うどん">
				<label for="input_udon">うどん</label>
			<input type="checkbox" name="food[]" id="input_soba" value="そば">
				<label for="input_soba">そば</label>
			<input type="checkbox" name="food[]" id="input_ramen" value="ラーメン">
				<label for="input_ramen">ラーメン</label>
		</div>
		<input type="submit" value="送信">
	</form>

	<!-- 通信結果を出力するためのdiv -->
	<div id="resultarea" style="background-color:#ffff9d; margin-top:15px;"></div>
</div>

<script>
jQuery(function($){
	// formの送信ボタンが押されたときの処理
	$( '#testform' ).submit( function(event){
		// クリックイベントをこれ以上伝播させない
		event.preventDefault();

		// フォームデータから、サーバへ送信するデータを作成
		var fd = new FormData( this );

		// サーバー側で何の処理をするかを指定。後ほどphp側で実装する
		fd.append('action'  , 'ajaxtest' );

		// ajaxの通信
		$.ajax({
			type: 'POST',
			url: ajaxurl,
			data: fd,
			processData: false,
			contentType: false,
			success: function( response ){
				$("#resultarea").html(response);
			},
			error: function( response ){
				$("#resultarea").html( "error" );
			}
		});
		return false;
	});
});
</script>

はい。

submitボタンで単純にPOSTメッセージを送るのとほぼ同様のことをしていますが、
JavaScript側でデータをまとめて、jQueryの「ajax」で送信するひと手間が加わります。

WordPressでFormDataを使う場合、「ajax」の引数に、
processData: false,
contentType: false,
を付けていないとうまく動かないようなので注意してください。

「processData」は、付与したデータをクエリ文字列に変換するかどうかの設定。
trueにすると「?yourname=hoge&age=30&・・・」のような形式に変更されてしまうので、falseにしてそのままのデータ形式で送ってもらいます。

「contentType」は、データの形式を指定するもの。
例えば、デフォルトでは「application/x-www-form-urlencoded」だったり、
自分で「application/json」を指定してみたり。
FormDataを使う場合は「false」にして指定なしにしないと動かないっぽい。

これで、フォームの「送信」ボタンを押すと、
「admin-ajax.php」に対して「ajaxtest」というアクションを実行してくれ！
フォームのデータも付けておくから！
という命令を投げることができます。

Ajaxリクエスト先での処理の実装

さて、「ajaxtest」というアクションを実行してくれ！
という命令がサーバー側に送られて来るので、それに対するアクションを作成する必要があります。

具体的には、functions.phpにて、こんな実装。

function ajaxTestFunc(){
	// POSTされたデータは$_POSTに、連想配列で格納されている
	$result .= htmlentities( $_POST["yourname"], ENT_QUOTES, 'UTF-8' ) . "さん";
	$result .= "(" . $_POST["age"] . ")";
	$result .= ($_POST["sex"]=="man" ? "男性" : "女性") . "のラッキーフードは";
	if( isset($_POST["food"]) && is_array($_POST["food"]) ){
		foreach($_POST["food"] as $value){
			$result .= "、" . $value;
		}
	}
	else{
		$result .= "、麺類以外";
	}
	$result .= "です！";

	// echoで、クライアント側に返すデータを送信する
	echo $result;

	// dieしておかないと末尾に余計なデータ「0」が付与されるので注意
	die();
}
add_action( 'wp_ajax_ajaxtest', 'ajaxTestFunc' );
add_action( 'wp_ajax_nopriv_ajaxtest', 'ajaxTestFunc' );

はい。

ポイントは
・POSTされたデータは「$_POST」に入ってる
・echoでクライアントにデータを返せる
・add_actionでアクションを作成
です。

アクションを作成について、少し補足説明しておきます。

「add_action」でajaxのアクションを追加

add_actionでアクションを登録することができます。

add_action( ‘wp_ajax_ajaxtest’, ‘ajaxTestFunc’ );
とすることによって、
「wp_ajax_ajaxtest」
の「wp_ajax_」を抜いた「ajaxtest」という名前のアクションが使えるようになります。

で、もうひとつ、
add_action( ‘wp_ajax_nopriv_ajaxtest’, ‘ajaxTestFunc’ );
というのが出てきました。

これは、
WordPressに管理者としてログインしていない人が使えるアクションを登録します、という意味になります。

「wp_ajax_ajaxtest」だけだと、管理者としてログインしている人しか使えないアクションになります。
これは、管理者ページをカスタマイズしたりするときにだけ使うもの。

今回はどちらも使えるように、
add_action( ‘wp_ajax_ajaxtest’, ‘ajaxTestFunc’ );
add_action( ‘wp_ajax_nopriv_ajaxtest’, ‘ajaxTestFunc’ );

としています。

WordPressでAjax、実行結果

で、実行結果はこんな感じになります。

 

パッと見、通信してるかどうかわかりにくいですけどね。。
一般的には、例えば通信待ちの間はグルグルを表示させたりしますが、細かいことははしょってます。
とりあえずデータがやり取りできるよ、という動作例です。

まとめ

ということで、WordPressでAjax、でした。

ページのリロードなしでサーバー側とデータをやり取りできるので、ユーザーにもストレスなく動的なページを作ることができます。

WordPressではアクションを作成しておくだけで、あとはデータの加工処理を実装するだけなので、比較的手軽に使えるかと。
ぜひチャレンジしてみてください！

それではまたー。