気になる言葉ショップ

気になる言葉ショップでは、管理人のわがままで選ばれた気になる言葉ごとのオンラインショッピングコーナーを設けています。
Home > wordpress >
WordPressでAjaxを使う

WordPressでAjaxを使う

前回、メディアボタンの追加で、次回はエディタ画面に挿入するところと書きましたが、その前に、ポップアップウィンドウに表示する部分をAjaxを使って遷移したいと思います。

さすがWordPressですね、Ajax用の仕組みも用意されている。
まず、サーバ側では、すべてadmin-ajax.phpがリクエストを受けて、$_REQUEST[‘action’] の値によってアクションフックを利用して振り分けられます。
それが、wp_ajax_{action_name} 、wp_ajax_nopriv_{action_name}というアクションフックです。{action_name}は、受け取りたいリクエストの$_REQUEST[‘action’] の値です。noprivの方はログアウト中、noprivがついてない方はログイン中のみ動作します。今回は、投稿の時に使うので、ログイン中しか投稿できないならnopriv付きの方のみで足りそうです。

ブラウザ側では、urlが、admin-ajax.phpで、dataの”action”で、{action_name}を設定するようにすればいい。

例えば、wp_ajax_nopriv_db_searchというアクションフックを利用しようとするなら、
ブラウザ側で、action=db_searchというパラメータが入るようにします。

jQuery.ajax({
        type: 'POST',
         url: ajaxurl,
         data: {
                "action": "db_search"
                },
...

前回のメディアボテン追加では、ポップアップウィンドウ内の表示は、onMediaButtonPage()が行うようにしたので、こんな感じになります。
{action_name}がdb_searchです。

function onMediaButtonPage(){
		$admin_url = admin_url( 'admin-ajax.php', is_ssl() ? 'https' : 'http' );
		echo <<<HTML
&lt;form id="db_product_search" action="$admin_url" method="post">
&lt;input type="hidden" name="action" value="db_search" />
&lt;input type="text" name="name" value="" size="32" />
&lt;input type="image" src="$submit_img" name="submit" alt="検索" value="実行" align="middle" />
&lt;/form>
&lt;script type="text/javascript">
&lt;!--
(function ($) {
	$(document).ready(function () {
    		$('#db_product_search').submit(function(event){
        		event.preventDefault();
			$.ajax({
        		    url: $(this).attr("action"),
        		    type: $(this).attr("method"),
        		    data: $(this).serialize()
        		}).done(function(response){
				$("#db_product_list").html(response); // 返ってきたものをHTMLとしてそのまま表示
        		});
			return false;
    		});

	});
})(jQuery);
//-->
&lt;/script>
&lt;div id="db_product_list">&lt;/div>
HTML;
}

続いて、サーバ側処理

add_action( 'wp_ajax_nopriv_db_search', 'search_product' );

function search_product() {
	//何か処理して$messageに返す値をセット

	//wp_send_json(); // JSONで帰す場合にヘッダーにContent-Type: application/json; charset=UTF-8を出してくれる
	echo $message;
	die();
}

Comments are closed.