WordPressを実践勉強中、ajaxについてうにゃ。
2017.10.27
WordPressでajaxを動かそうするとき、WordPressのルールに
則って動かさないと動かないらしい。
なので、このような記述を書かないといけない。
まず、非同期処理の送信先に、admin-ajax.phpというファイルを指定。
そこへPOSTかGETしないといけない。そしてデータとして
アクションさせるファンクション名を記述して
上げないといけないらしい。
こんな感じになる。
$( '#submit' ).on( 'click', function(){ $.ajax({ type: 'POST', url: <?=admin_url('admin-ajax.php')?>, data: { 'action' : 'hoge_f', }, dataType: "json", success: function( obj){ alert( obj ); } }); return false; });
次にWPテーマのファンクションファイルに下記を追加記述。
function hoge_f(){ echo json_encode($_POST); die(); } add_action( 'wp_ajax_hoge_f', 'hoge_f' ); add_action( 'wp_ajax_nopriv_hoge_f', 'hoge_f' );
ここでミソなのが、die();という部分、これを除けると0という文字も出力されてしまう。
ちなみにwp_ajaxがログイン時の振る舞い、wp_ajax_noprivがログアウト(=訪問者)時の
振る舞いだそうだ。
この2つの勘所だけ覚えとけばWordPressで非同期処理が
行えるのではないだろうか、もっと詳しく知りたい場合、admin-ajax.phpの中身を
見たらよいのだろうけど、にわかWordPress職人さんはコレだけ
覚えとけば良さそうだと。
タグ
'hoge_f', 'wp_ajax_nopriv_hoge, Action, admin-ajax.php, AM, click, dataType, echo json_encode, function hoge, function hoge_f, obj, POST, return false, submit, WordPress職人, ファンクション, ファンクションファイル, ログアウト, 体, 非同期処理,
2桁になると数字と文字でバグる非同期通信の穴。MYSQLめ!!
2016.03.19
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>2桁になると数字と文字でバグる非同期通信の穴。MYSQLめ!!</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0, user-scalable=yes"> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/i18n/jquery-ui-i18n.min.js"></script> <script> $(function() { hoge(0); }); function hoge(cnt){ $.ajax({ type: "POST", url: "json.php", data:{ cnt:cnt }, dataType: 'json', success: function(obj){ var cnt = Number(obj.cnt); var id_name = obj.id_name; $("#id_no").html(cnt); $("#id_name").html(id_name); if(id_name!=""){ hoge(++cnt); }else{ alert("もうねぇよ━━━(゚∀゚≡(゚∀゚≡゚∀゚)≡゚∀゚)━━━━!!") } } }); } </script> </head> <body> No:<span id="id_no"></span>ID:NAME:<span id="id_name"></span> </body> </html> <?php //json.php $cnt = $_POST["cnt"]; $link = mysql_connect('localhost', 'user', 'pass'); if (!$link) { die('接続失敗です。'.mysql_error()); } $db_selected = mysql_select_db('database_name_hoge', $link); if (!$db_selected){ die('データベース選択失敗です。'.mysql_error()); } //$result = mysql_query('SELECT * FROM where id_no =' . $cnt); $result = mysql_query('SELECT * FROM where id_no =' . intval($cnt)); if (!$result) { die('クエリーが失敗しました。'.mysql_error()); } $row = mysql_fetch_assoc($result); $obj["id_name"] = $row['id_name']; $obj["cnt"] = $cnt; $json = json_encode($obj); echo $json;
上記のソースはおそらく正しく動くであろうコードです。
このコードで何がしたいのかを解説していきます。
このHTML(index.html)が呼ばれたら(表示されたら)、
再帰処理がかかりPHPが動作してデータベースのテーブルから
主キーのid_no(int型)を検索しid_name(text型)を参照し
jsonで値を返して、受け取り表示するというものです。
簡単なプログラムですが、MYSQLに問い合わせをするときに
ちゃんとint型に変換してあげないと2桁なるとバグるという
問題が発生します!!
要するに0?9の間は参照してくれるのに
10になるとアレ・・・??
ってなり、参照してくれなくなるという
問題が発生します。
トイウコトデ・・・。
PHPやJQは案外いい加減な振る舞いをしてくれるけど
MYSQLは型の設定通り動作してくれるという
事なので注意が必要です。
ちなみに上記のコードが動作するかは未検証です(´Д`)
タグ
ajax.googleapis.com, AM, body>, code.jquery.com, datepicker.regional, datepicker.setDefaults, DOCTYPE html>, FROM where id_no, function hoge, head>, jquery-1.10.2.js, jquery-ui-i18n.min.js, jquery-ui.css, json.php, meta charset, MYSQL, script src, script>, select, span id, span>, title>,