あのときコード

WordPressでajax

wordpress javascript jquery ajax

ajaxから呼ばれる関数を準備

function my_ajax_func() {
    //POSTされたデータの取得
    $post_param_a = $_POST['post_param_a'];
    $post_param_b = $_POST['post_param_b'];

    //レスポンス
     echo 'response_data';
    exit;
}

WordPressの設定

◆ 条件

ajaxで呼び出す関数名：my_ajax_func()

 

◆ 使用するコード

add_action( ‘wp_ajax_my_ajax_func‘, ‘my_ajax_func‘ );
add_action( ‘wp_ajax_nopriv_ajax_my_ajax_func’, ‘my_ajax_func‘ );

 

add_action( 'wp_ajax_my_ajax_func', 'my_ajax_func' );
add_action( 'wp_ajax_nopriv_ajax_my_ajax_func', 'my_ajax_func' );

WordPressの情報をJavascriptへ設定

header.php、footer.phpなどにWordPressのURL情報を設定

<script>
    var ajax_url = '<?php echo admin_url("admin-ajax.php"); ?>';
</script>

javascriptで呼び出し

◆ 条件

上記のjavascriptの変数「ajax_url」を定義後、ajax処理（ここではjQueryを使用）

$.ajax({
    type: 'POST',
    cache: false,
    async: true,
     dataType: 'text',
    url: ajax_url,
    data: { 
        'action': 'my_ajax_func',
        'post_param_a': 'param_a_value',
        'post_param_b': 'param_b_value'
    },
    success: function (response) {
        //成功
    },
     error: function (response) {
        //失敗
    }
});