質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.80%

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

解決済

回答 4

投稿

  • 評価
  • クリップ 0
  • VIEW 547

krs

score 10

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

・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>

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

check解決した方法

0

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

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

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


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

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

'post__in' => array(),


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

$args['post__in'] = $mes;

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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


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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/12/24 13:15

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

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

    キャンセル

  • 2019/12/24 14:47

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

    コードは教えて頂いた" $_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 );で出力
    //////////////
    〜〜〜
    ```

    キャンセル

  • 2019/12/24 16:36

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

    キャンセル

  • 2019/12/24 16:47 編集

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

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

    キャンセル

0

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

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

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


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

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

'post__in' => array(),


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

$args['post__in'] = $mes;

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

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

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


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

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

'post__in' => array(),


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

$args['post__in'] = $mes;

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.80%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る