WordPressを実践勉強中、ajaxについてうにゃ。

2017.10.27

Logging


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

Logging

<!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&gt, code.jquery.com, datepicker.regional, datepicker.setDefaults, DOCTYPE html&gt, FROM where id_no, function hoge, head&gt, jquery-1.10.2.js, jquery-ui-i18n.min.js, jquery-ui.css, json.php, meta charset, MYSQL, script src, script&gt, select, span id, span&gt, title&gt,