検索する

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職人, ファンクション, ファンクションファイル, ログアウト, 体, 非同期処理,

非同期処理でファイルを送る方法（jquery）

2017.01.14

Logging

<script type="text/javascript">
    $("#isubmit").click(function(){
        var formdata = new FormData($("#iform").get(0));//form ID
        $("#isubmit").prop('disabled', true);
        $.ajax({
            type : 'post',                      // HTTPメソッド
            url  : '/hoge/index.php',           // POSTするURL
            data: formdata,         // POSTするデータ
            processData: false,
            contentType: false,
            dataType: 'json',                   // レスポンスのデータ型
            success: function(obj) {      // 成功時の処理
                if(obj.err==""){
                    location.reload();
                    return false;
                }else{
                    var strComment = obj.err;
                    alert(strComment);
                    $("#isubmit").prop('disabled', false);
                }
                return false;
            },
            error: function(e) {                 // HTTPエラー時の処理
                var strComment = 'Server Error. Please try again later.';
                alert(e);
                $("#isubmit").prop('disabled', false);
            }
        });
    });
</script>

非同期処理でファイルを送る方法の勘所は2箇所。

        var formdata = new FormData($("#iform").get(0));//form ID

 

            processData: false,
            contentType: false,

これが大事な箇所です。この2箇所がないとファイルの非同期は
成立しません。
 

タグ

'disabled', 'Server Error, contentType, form ID, function, iform, index.php, isubmit, location.reload, new FormData, obj.err, Please try again later, processData, prop, return false, script type, script&gt, var formdata, var strComment, ファイル,