WordPressとブラウザとのAjax通信　（改訂版）

前回のだと、ただサンプルコードを置いただけだったのでもう少し情報を追加しました。 まず後で出てくるのですがcrossDomainとは、複数のドメインにアクセスすることであり、通常の設定では安全上の関係からcrossDomainはブロックされてしまいます。今回は、このcrossDomainを可能にさせていきたいと思います。 以下のコードは、Google Mapのアイコンをクリックしたら、情報windowを開かせるコードです。 まずfunctions.phpの方の処理から、、、、

add_action('wp_ajax_detail', 'detail');  // ログイン状態のユーザーからのアクセスで動作する
add_action('wp_ajax_nopriv_detail', 'detail'); // 非ログインのユーザーからのアクセスで動作する
function detail()
{
    $id = $_POST['id'];
    $detail[0] = get_the_title($id);
    $detail[1] = get_post_meta($id,'name',true);
    header("Content-Type: application/json; charset=utf-8");
    header("Access-Control-Allow-Origin: *");
    echo json_encode($detail, JSON_UNESCAPED_UNICODE);

    die();
};

ポイントは、以下のコードによって複数のサーバーとのやり取りを許可することです。これをしないと、安全上ionicとのサーバーとしか通信できなくなってしまいます。

header("Access-Control-Allow-Origin: *");

あと、$_POST[‘id’]でブラウザからのpost methodでリクエストされた情報を受け取っています。 実際にこの後記載するindex.htmlのサンプルにおいて、現在actionとidの２種類のdataを受け取ることが出来ます。 またこのデータは自分で自由に追加でき、今回は予めアイコンにふっておいた投稿idをリクエストすることでどこのアイコンをクリックしたか判別しています。

次に、index.htmlの方について、、、 サンプルは、以下のとおりです（重要なところだけ）。以下のコードはclickした時に適応させる関数内に実際には配置する必要があります。

 <script src="./js/jquery.xdomainajax.js"> </script>
    <script> var wp_url_admin_ajax = 'http://192.168.33.10/wp-admin/admin-ajax.php'; </script>
    <script>
           jQuery(function ($) {
                      $.ajax({
                          type: 'POST',
                          dataType: 'json',
                          crossDomain: true,
                          url: wp_url_admin_ajax,
                          data: {
                             'action': 'detail','id':marker_options['id']

                },
                success: function (response) {
　　　　　　　　　　　                  var infowindow=new google.maps.InfoWindow({
                        /* 情報ウィンドウのオプション設定 */
                        content: '<div class="infowindow">' 
　　　　　　                        　+'<h4>'+response[0] +'</h4>' + '<br />' +'<p>住所：'+ response[1]+'</p>'+
                                 '</div>'
                         });
                      infowindow.open(map_canvas,marker);
                   }
              });
        });
    </script>

以上のコードでは、responseは、function.phpで値を代入した＄detailの値を受け取っています。