Ajax通信 ブラウザ側の処理について(index.html)

Yoshitalka 20views 更新:2017年6月22日

今日はインターン最終日でした。
5日目、6日目に渡ってajax通信について勉強し作ったプログラムを載せます。



<!-- ブラウザ側の処理 WordPressにAjax通信のリクエストを投げる--> <!-- jQueryのCDNを使ったjQueryファイルの読み込み --> <!-- (1)JQueryを設定しよう --> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script> var wp_url_admin_ajax = 'http://tsukahara.local/wp-admin/admin-ajax.php'; </script> <script> jQuery(function($) { $.ajax({ type: "POST", // (3)JQueryの$.ajaxに「crossDomain: true」のオプションを設定しよう crossDomain: true, url: wp_url_admin_ajax, data: { action: "tell_me" }, success: function(response) { json = eval("(" + response + ")"); var date = JSON.parse(response); for (i = 0; i < 104; i++) { create_marker(date[i].Latitude, date[i].Longitude); }


ポイントは、下から5行目です。


var date = JSON.parse(response);


サーバー側で行う処理で、AjaxはJSONファイルしか扱えないので、JSON形式にエンコードしています。
そのJSON形式にエンコードされたデータを使いたいので、今度はブラウザ側で文字列をJSON として解析してあげます。

JSON.parse について詳しくはこちらを参考にして下さい。 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません