【WordPress】ajaxでの配列の渡し方がわからない

Question

実装したい内容は以下のとおりです。

・content.phpのsaveボタンを押す
・数字がlocalStorage内の配列に入る
・callsajax();が動作する
・callsajax();でlocalStorageの配列をmesに入れる(ここが怪しい・・・)
・mesがpost__inに入り、対応IDのページが表示される

何故か対応IDのページが表示されない状態です。

以下説明が長くなり、申し訳ないですが、要約すると
WordPressでの「記事ループ生成」内のコード " 'post__in' => array($mes), " 部分が正常に動作していない原因を探している状態です。

$masは「ajax処理(ajax.js)」で、localStorageから受け取っています(受け取っているはずです)。
現時点のコードでは特にエラーは出ず。

私としては、受け取り方に問題があるのでは？、と思っているのですが、localStorageとajaxを使ったサイト構築の実例がないため、一つ一つ手探りの状態です・・・。

どなたか、その手の知見が豊富な方にお力をお借りしたく思います。

//----------------ajax準備(funcsion.php)-----------------

<?php ~~~ //Ajaxを利用するためリクエスト送信先URLをグローバル変数として定義 add_action( 'wp_head', 'add_demo_ajaxurl', 1 ); function add_demo_ajaxurl() { ?>

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

<?php } //-----------------------記事ループ生成--------------------- function ajax_get_new_posts() { $mes = $_POST[mes]; //表示個数 $returnObj = array(); //結果格納用配列 //記事取得条件 $args = array( 'post_type' => 'page', 'orderby' => 'date', 'order' => 'DESC', 'post_status' => 'publish', 'post__in' => array($mes),//☆これがうまく行かない・・・ ); //記事サブループ $posts = new WP_Query( $args ); if ($posts->have_posts()) { while($posts->have_posts()) { $posts->the_post(); $returnObj[] = array( 'post_content' => apply_filters('the_content',get_the_content()), ); } } wp_reset_postdata(); echo json_encode( $returnObj ); die(); } add_action( 'wp_ajax_ajax_get_new_posts', 'ajax_get_new_posts' ); add_action( 'wp_ajax_nopriv_ajax_get_new_posts', 'ajax_get_new_posts' ); //----------------------- callsajax処理(ajax.js)------------------------- function callsajax(){ console.log('動作2:'); var mes = JSON.parse(localStorage.getItem(storageKey)); mes=mes.map(Number); $.ajax({ type: 'POST', url: ajaxurl, //Ajaxを利用するためリクエスト送信先URL(グローバル変数で定義されている) //contentType: 'application/json', //dataType : "json",//エラーが出るのでコメントアウト data: { 'action' : 'ajax_get_new_posts', //呼び出す関数名 'mes' : mes, }, success: function( response ){ var jsonData = JSON.parse( response ); //JSON形式を配列に変換 var result_html = "<div>"; //表示用HTML $.each( jsonData, function( i, val ){ //配列ループ result_html = result_html + val['post_content']; }); result_html = result_html + "</div>"; var element = document.getElementById('ajax_demo_result'); //結果を表示する場所 element.innerHTML = result_html; //結果表示 } }); return callsajax; } //---------------------数字を配列(localStorage内)に登録(content.php)----------------------- <script type="text/javascript"> var save = document.getElementById('save151'); save.onclick = function() { if (saveData.indexOf(151) >= 0){ console.log("すでにあります"); }else{ console.log("151を配列に"); saveData.unshift(151); localStorage.setItem(storageKey, JSON.stringify(saveData)); callsajax(); }; }; </script>

Answer 1

こちら自己解決しました。
お手数おかけいたしました。

従来どおり以下のコードを差し込みます。これで配列内をint型にします。

$mes = array_map('intval', $mes);

それでも動かなかったのですが、原因は //記事取得条件 内の'post__in'に直接変数を入れていたことみたいです。

$args(array)の値は空白にします。

'post__in' => array(),

その後、別に配列に変数を追加するコードを入れます。

$args['post__in'] = $mes;

これで現時点では正常に動作することを確認できました。
回答された方、ありがとうございました。
とりあえずはこれで様子を見てみます。

Answer 2

こちら自己解決しました。
お手数おかけいたしました。

従来どおり以下のコードを差し込みます。これで配列内をint型にします。

$mes = array_map('intval', $mes);

それでも動かなかったのですが、原因は //記事取得条件 内の'post__in'に直接変数を入れていたことみたいです。

$args(array)の値は空白にします。

'post__in' => array(),

その後、別に配列に変数を追加するコードを入れます。

$args['post__in'] = $mes;

これで現時点では正常に動作することを確認できました。
回答された方、ありがとうございました。
とりあえずはこれで様子を見てみます。

Answer 3

こちら自己解決しました。
お手数おかけいたしました。

従来どおり以下のコードを差し込みます。これで配列内をint型にします。

$mes = array_map('intval', $mes);

それでも動かなかったのですが、原因は //記事取得条件 内の'post__in'に直接変数を入れていたことみたいです。

$args(array)の値は空白にします。

'post__in' => array(),

その後、別に配列に変数を追加するコードを入れます。

$args['post__in'] = $mes;

これで現時点では正常に動作することを確認できました。
回答された方、ありがとうございました。
とりあえずはこれで様子を見てみます。

Answer 4

$_POST[mes];
↓
$_POST['mes'];

一応まだお情けで動くけどもうそろそろ動かなくなるはず

しかしまだ動くはずとは思うので多分原因は別

まあ、こういうのはjs側でajaxで送る前に
dataの内容をconsole.logしてみて意図通りの値が入っているか
php側で$_POSTにvar_dump()なりerror_log()なりで
意図通りの値が入っているかと順に確認ですかね

Comments

[krs]

迅速なご回答ありがとうございます！
しかし、こちらの内容の通りに" $_POST['mes']; " で実行しましたが。状態は変わらないようです。

ですので、おっしゃるとおり、console.log、error_log()等を使用してもう少し内容を追ってみます。

[krs]

前述の続きです。
私なりに調べてみました。

コードは教えて頂いた" $_POST['mes']; "を使っています。

その状態で、二箇所でconsole.logを使って、中身を確認してみました。
　①localStorageからmesに移した段階のmesの中身
　②function ajax_get_new_posts()内の$mesの中身(js経由で出力)

結果は以下のようになりました(数字は151,196)。
　①151,196
　②
```
responseはarray(2) {
[0]=>
string(3) "196"
[1]=>
string(3) "151"
}
```
responseの時点で数字ではなく、文字列での出力をしているので、おそらくコレが原因かと思っています。
そういうわけで、この配列の中身を文字列から整数に治す方法を探してみました。
下のコードが有効という情報があったのですが、実際に使ってみると、"responseはNULL"という結果がでます・・・。
```
$mes = array_map('intval', explode(",", $mes));
```
そういう経緯で、現在は配列の中の文字列を整数に治す方法を探している段階です。

・以下、出力コード内容

callsajax処理(ajax.js)内
```
〜〜〜
var mes = JSON.parse(localStorage.getItem(storageKey));
mes=mes.map(Number);
console.log(mes);//この段階での中身
$.ajax({
type: 'POST',
〜〜〜
success: function( response ){
〜〜〜
console.log( 'responseは' + response );//echo var_dump($mes);の中身
}
});
return callsajax;
}
```

記事ループ生成(funcsion.php)内
```
〜〜〜
wp_reset_postdata();

//echo json_encode( $returnObj );//邪魔なのでコメントアウト
echo var_dump($mes);
die();
//////////////
これをconsole.log( 'responseは' + response );で出力
//////////////
〜〜〜
```

[krs]

追記です。
先程の"配列の中の文字列を整数に治す方法"ですが、こちらは自己解決しました。
```$mes = array_map('intval', $mes);
```
ただし、依然として、結果は変わらない状態です・・・。

[KazuhiroHatano]

とりあえず、やはり読みにくいので質問文のコードを
```で囲んでやってください

と言うかよくみたらarray($mes)は
(array)$mesなんじゃないんですかね