WordPress内でAjaxで非同期にサーバとの間の通信を行ってみました。
例として任意のテキスト内の特殊文字を特殊文字を HTML エンティティに変換してみます。
- 呼び出すファンクション名を 「functions.php」に記述する。
- 呼び出されるphp関数を作成する。今回のサンプルでは特殊文字を変換するphp関数利用する
- javascript(今回はjQeury)でAjaxの呼び出し関数を作成する。
jQuery 及び CSS等々は別途プラグインの利用や functions.phpでインクルードする必要があります。ここでは WordPressからAjaxの利用に関するテストのみとします。
また、実際の運用では入力文字のチェック、入力制限、文字コードの判別等々のチェックが必要となります。ここではあくまでAjaxのテスト、サンプルですのでご了承ください。
今回の作成したサンプルです。任意の文字列を入力してください。
functions.phpの修正
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
//--------------------------------------------- //Ajaxのリクエスト送信先 admin-ajax.php の情報を //javascriptのグローバル変数として出力する。 //--------------------------------------------- function add_my_ajax() { ?> <script> var ajaxurl = '<?php echo admin_url( 'admin-ajax.php'); ?>'; </script> <?php } //--------------------------------------------- //Ajaxから呼び出される関数の作成。 //ここでは単純な htmlspecialchars()関数を使用し特殊文字を HTML エンティティに変換する //--------------------------------------------- function view_sitename(){ $tmp = htmlspecialchars($_POST["message"], ENT_QUOTES); echo stripslashes(htmlspecialchars($tmp, ENT_QUOTES)); die(); } //--------------------------------------------- wp_ajax_{action名} … ログインユーザーの時、呼び出される<br> wp_ajax_nopriv_{action名} … 非ログインユーザーの時、呼び出される //--------------------------------------------- add_action( 'wp_ajax_view_sitename', 'view_sitename' ); add_action( 'wp_ajax_nopriv_view_sitename', 'view_sitename' ); //--------------------------------------------- |
呼び出し、結果表示の一連のHTML
レイアウト、デザイン関係のCSSは省略
|
1 2 3 4 5 6 |
<textarea id="cource"></textarea> // テキストエリアで入力した内容をAjax経由のphpで変換し他結果を // 以下の #dist要素に表示させる <div id="dist"></div> <a href="#" id="submit">変換</a> </div> |
呼び出し、結果表示の一連のjQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
jQuery(function($) { $( '#submit' ).on( 'click', function(){ var source=$("#source").val(); $.ajax({ type: 'POST', url: ajaxurl, data: { 'action' : 'view_sitename', // functions.php で定義したアクション名 'message' : source, // 入力したテキスト内容 }, success: function( response ){ $("#dist").html( response ); // Ajaxから帰ってきた内容 } }); return false; }); |