イントロダクション
今回は、非同期通信の実装とテストを行います。注意点としては、クライアントサイドのみの実装ですので7、サーバーサイド(PHP)まで処理が届くことを考慮に入れていません。ワードプレスのプラグインで非同期通信を行うのには、アクションフックを設定する必要があるようです。
XMLHttpRequest
前回は、XMLHttpRequestについて調べました。ちょっとしたコードも作成しました。
では、早速やりましょう!
非同期通信の実装
作成する非同期通信で使用するXMLHttpRequestは汎用的に使用したいのですが、今回は汎用化しないでプラグインのphpファイルで出力します。
具体的に。。。
下のようなダッシュボードの表示を行うためのHTMLを出力しているPHPファイルはmanage.phpと言うファイルです。gitにアップロードしてあるのでよかったら見てください。
そして、このファイルに下のようなコードを追加します。
/* * XMLHttpRequest生成のメソッド * @param methdoName GET or POST * @param sendURL リクエストの送信先のURL * @param btnId 謳歌したときに起動するボタンのID * @param stateChangeMethod レスポンス */ function createXHR(sendURL, btnId, stateChangeMethod, clickMethod) { xhr = new XMLHttpRequest(); document.getElementById(btnId).addEventListener('click', clickMethod); xhr.onreadystatechange = stateChangeMethod; return xhr; }
このメソッドはXMLHttpRequestを作成して返却します。
前回も記載しましたので細かいところは割愛しますが、作成したXMLHttpRequest(XHR)は下のようなメソッドを設定してやる必要があります。
- ステータス変更時の処理(メソッド)
- 送信先のURL
これらを引数で渡すようにしてあります。
function createXHR(methdName, sendURL, btnId, stateChangeMethod, clickMethod)
そして、プラグインのZIPファイルをインストールしたときに誰でも使用できるようにBootStrapのURLを指定しておきます。echo '<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">';
さらに下のリンクはBootStrapのチュートリアルへのリンクです。
BootStrapのチュートリアル。
受診する側のPHPを作成する
今回の非同期通信は作成したアンケート情報をDBに登録する処理を行うために使用します。
なので、InsertQuestionary.php
と言うファイルを作成します。
JS側からの送信
リクエストにはGETとPOSTの2種類あります。
GETはデータの取得、公開して良い情報をパラメータとして渡す、などの使用方法があります。
今回は、公開したくない情報をリクエストするのでPOSTを使用します。
参考にしたサイトはこちらです。
送信時に詰まったこと
とりあえず詰まったのは送信するのにJSONで送信したことです。
送信時に以下のように実装する必要がありました。
// JSONで送信する xhr.open("POST", ''); xhr.setRequestHeader("Content-Type", "application/json"); xhr.send(JSON.stringify(data));
そして、WebAPI側のPHPではJSONで取得するのでリクエストの取得とちょいと違う方法で取得する必要がありました。
ini_set('display_errors', "On"); // JSONリクエストを受け取る $json = file_get_contents('php://input'); $data = json_decode($json); $question = $data->question; // (プラグインフォルダにあるので)WordPressはすでに読み込まれている // データ登録用のグローバル変数 //$wpdb; echo $question;
だいぶ遅くなってしまったので今日はここで失礼します。
JQueryを使う
WPでの実装では、jQueryがデフォルトで参照できるようです。。。なのでincludeの追記が必要ないと思われます。※自分の環境では必要ありませんでした。
送信処理のカタチ
そして、これを実装すると下のようになります。
$.ajax({
//サーバに送信するリクエストの設定
)}
.done(function(){
//通信に成功した場合の処理
})
.fail(function(){
//通信に失敗した場合の処理
})
サンプルコード
REST通信などと呼ばれている方法では、JSONをリクエストで送信します。
$.ajax({
url: 'sample.php', // リクエスト送信するファイル
type: 'POST',// HTMLを取得したいだけならGETでよい
dataType: 'json' // 最近ではRESTなんて呼ばれている
}).done(function(html) {
console.log(html); // 正常レスポンス時の処理
}).fail(function() {
alert('エラーが起きました'); // 異常レスポンス時の処理
});
でわでわ。。。
関連ページ
- WordPress プラグイン作成〜DBを使用する〜
- PHP PDO 〜MySQLにアクセスする〜
- PHP Ajax 〜DBに登録したデータを受信する〜
- Google Maps API PHP連携 〜マップ情報をDBに登録する〜
- PHP Image File 〜iPhoneやAndroidでの画像送受信の問題〜
- AngularJS Routing 〜PHPをWeb APIにする〜
- WordPress PHPカスタム〜根本的に見た目を変える〜
- WordPress PHPカスタム〜根本的に見た目を変える2〜
- Eclipse PHPプラグイン 〜ElipseでWordPress環境を構築〜
- WordPress テスト実装 〜heade-test.phpを表示〜
- AngularJS + PHP 〜WordPressと連携する〜
- AngularJS + PHP 〜AngularJSの実装〜
- AngularJS + PHP 〜AngularJSの実装2〜
- WordPress 処理解析 ~index.phpを眺める~
- WordPress Plugin NewStatPress ~アクセス解析プラグインAPIを使う~
- WordPress 処理解析 ~ログイン処理を調べる~
- WordPressカスタム〜アンケートボタンを追加する(設計)〜
- WordPressカスタム〜プラグインの作成〜
- WordPressカスタム〜ダッシュボードのプラグイン画面作成〜
- WordPressカスタム〜ダッシュボードのプラグイン画面作成2〜
- WordPressカスタム〜ダッシュボードのプラグイン画面作成3〜
- WordPress プラグイン作成〜アンケート作成プラグインを作る〜