wordPress ajaxコーディング方法

Question

２このリストの値を移動させてその値をPOSTで自作のphpに渡したいです。

ajaxのコーディングですが、下記の様に作成しましたがうまく起動しません。
何処が間違っているか教えていただけないでしょうか。
やりたい事はある２このリストの値を移動させてその値をPOSTで自作のphpに渡したいです。

発生している問題・エラーメッセージ

値のPOSTが上手く出来ていないみたいでphpファイル側で$_POSTした値が未定義とエラーが出ました。

該当のソースコード

function add_my_ajaxurl() {
?>
<script>
var ajaxurl = ‘<?php echo admin_url( ‘admin-ajax.php’); ?>’;
</script>
<?php
}
add_action( 'wp_head', 'add_my_ajaxurl', 1 );

function ajax_move_users() {

    $post = $_POST['users_ID'][0];
    echo $post;

    die();
}
add_action('wp_ajax_ajax_test','ajax_move_users');
add_action('wp_ajax_nopriv_ajax_test','ajax_move_users');

?>
?>

// var count_log_filename_js ='count_log_js.txt';
// var flag='';    
// var user_id='';    

$(document).ready(function() {
 
    
    $('button[id=insert_button]').on('click', function() {
        // flag = 'insert';
        move('right_list', 'left_list');
    });
 
    $('button[id=delete_button]').on('click', function() {
        // flag = 'delete';
        move('left_list', 'right_list');
    });
 
    var move = function(_this, target) {
        $('select[id=' + _this + '] option:selected').each(function() {
            $('select[id=' + target + ']').append($(this).clone());
            $(this).remove();


        });

    };


    $('button[id=button_a]').on('click', function() {
        DB_action(); 
    });
        
    var DB_action = function(){

        var left_list = document.getElementById('left_list');
        var move_users_opsion = $(left_list).children();
        var move_users = [];

        var max = move_users_opsion.length;
        for (var i = 0 ; i<max;i++){
            move_users[i]=move_users_opsion[i].value ;
        }


        var post = 'POST';
        var postData = {
            'action': 'ajax_move_users',
            //action: TOURAJAX_AJAX.action,
            //nonce: TOURAJAX_AJAX.nonce,
            users_ID: [move_users]
            //'array_test[]': move_user
        };

        //Ajaxで送信
        $.ajax({
            url: ajaxurl,
            type: post,
            dataType: 'text',
            data : postData
        }).done(function (res) {
            /*var result_html = "<select>"; //表示用HTML
                for (date in res){   //配列ループ
                    result_html = result_html +'<option id=' + date + 'name= ' + date '>' + 'aaaaa' + '</option>';
                }
                result_html = result_html + "</select>";
                 
                var element = document.getElementById('left_list');  //結果を表示する場所
                element.innerHTML = result_html;    //結果表示*/
            console.log('送信が成功しました。');
            console.log(postData);
        }).fail(function (xhr, textStatus, errorThrown) {
            alert('エラーが発生しました。');
        });

    };

});

$move_user = $_POST['users_ID'][0];
global $wpdb;
$wpdb->delete( $wpdb->test_master ,
 array(
 	'posts_ID' => $_SESSION['toukou_id'] 
 ) , 
 array(
 	'%d'
 ));

for ($i=0; $i < count($move_user); $i++) {

	global $wpdb;
	$wpdb->insert( $wpdb->test_master , 
	array( 
		'posts_ID' => $_SESSION['toukou_id'], 
		'users_ID' => $muve_user[$i] 
		),
		array(
			'%d', 
			'%d'	
		));

}

//if (count($move_user)!==0){
    print "<script>alert('更新に成功しました。');</script>";
//}

試したこと

データの送信は確認できました。
が取得が上手く出来てないのかphpの変数が空の状態です。

Comments

[kei344]

質問文のコードブロックの終了部分に「```」が足りていません。記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。

[FATE-T]

ご指摘ありがとうございます。
修正しました、また不備ありましたらご指摘ください。

[kei344]

提示のコードはエラーが出て動かないと思いますが、書かれている状況が再現するコードを提示されたほうが回答も付きやすいと思います。

Answer 1

$.ajaxのdataパラメータにaction:'ajax_test'がセットされてない
というかこれ、dataに何も入ってなくないですかね？

Comments

[FATE-T]

JavaScriputに以下のコードを書き忘れていました
var left_list = document.getElementById('left_list');
var move_user = $(left_list).children();

action:'ajax_test'は、以下のように書けばいいのでしょうか？

var postData = {
'action': 'ajax_test',
'users_ID': move_user
};
ご教授お願い致します。

[FATE-T]

質問文更新しました。

[KazuhiroHatano]

actionのところはまあいいんですが

$(left_list).children();の戻り値を$.ajaxのdataにセットしても
正常に処理される気がしません
せめて$(left_list).text()あたりじゃないでしょうか

'users_ID[]': move_userみたいにしても配列にしてくれたりはしません
普通にusers_ID:[move_user]みたいな感じでいいです

'users_ID[]'みたいに指定しなきゃいけないのはFormDataのappend()でやる時です

[FATE-T]

ご指摘の箇所を修正して下記のコードで確認しようと思ったのですが、値が入っていないのか何も表示されません。

print("<script>
move_user.forEach(function(data) {
alert(data);
});
</script>");

後疑問なのですがどのPHPファイルにPOSTするのか何処で指定しているのでしょうか？

[FATE-T]

いろいろ調べてみたら、ajax_testが動いてないのではないかと思うのですが。
ご意見お願いします。

[KazuhiroHatano]

>後疑問なのですがどのPHPファイルにPOSTするのか何処で指定しているのでしょうか？

var ajaxurl = ‘<?php echo admin_url( ‘admin-ajax.php’); ?>’;
と
url: ajaxurl

しかしadd_action('wp_footer','add_my_ajaxurl');
みたいなコードが質問文のコードにないってことは
もしかしてvar ajaxurl = ‘<?php echo admin_url( ‘admin-ajax.php’); ?>’;
が出力されてないとかですかね

[FATE-T]

質問文に書き漏れでした。以下の文を記載しています。
add_action( 'wp_head', 'add_my_ajaxurl', 1 );

[FATE-T]

ご回答ありがとうございます。
ご回答いただいた情報を基に色々試して上記のようになったのですが受け取りができてないみたいです。
解決方法分かりましたらご教授お願いします。
長々お付き合いいただきありがとうございます。
出来ればまだお付き合いください。

Answer 2

値のPOSTが上手く出来ていないみたいで

ご質問に提示されたjavascript（Ajax部分）は、POST が 暗黙の var 宣言になっています（値は undefined）。

jQuery.ajax() の settings をご確認ください。
method (default: 'GET')とあります。

文字列で "POST" とすべきですところを デフォルト値の "GET" が適用されているため、PHP側は $_POST が未定義となっているのだと思われます。

Comments

[FATE-T]

ご回答ありがとうございます。
ご回答いただいた情報を基に色々試して上記のようになったのですが受け取りができてないみたいです。
解決方法分かりましたらご教授お願いします。