wp_ajaxを使用したAjaxリクエストに応答してJSONオブジェクトを取得できません

Question

wp_ajaxを使用したAjaxリクエストに応答してJSONオブジェクトを取得できません

4

266600 2014-11-17

WordPressとAjaxに問題があります.

これは私のJavaScriptの部分です(少しトリミングしました):

 var posts = $.ajax({
    type: 'POST',
    url: ajaxurl,
    async: false,
    dataType: 'json',
    data: { action: 'myAjaxFunc' },
    done: function(response) {
        return response;
    }
}).responseText;

$.each(posts, function() {
    $('#someSelect').append( $('<option</option>').text(this.name).val(this.id) );
});

私のPHPコードは次のとおりです:

 function myAjaxFunc() {

    $posts = get_posts( array(
        'posts_per_page'   => -1,
        'orderby'          => 'title',
        'order'            => 'ASC',
        'post_type'        => 'my-post-type',
        'post_status'      => array( 'publish', 'draft' )
    ) );

    $list = array();
    foreach ( $posts as $post ) {
        $list[] = array(
            'id'   => $post->ID,
            'name' => $post->post_title,
            'link' => get_permalink( $post->ID ),
        );
    }

    header("Content-type: application/json");
    echo json_encode( $list );
    die;
}
add_action( 'wp_ajax_nopriv_myAjaxFunc', 'myAjaxFunc' );
add_action( 'wp_ajax_myAjaxFunc', 'myAjaxFunc' );

スクリプトはadmin-ajaxからAjax応答を取得します.残念ながら、JavaScriptコードのeachステートメントに到達すると、コンソールはエラーをスローします...次のように表示されます:

 "Uncaught TypeError: Cannot use 'in' operator to search for '4' in Array".

「posts」変数のconsole.logを実行すると、文字列「Array」が取得されます. PHPで$list変数をどのように渡しても、常に文字列が返されます.クエリは他の場所に投稿を返すため、空ではありません. json_encodeなし、ヘッダーの宣言ありとなし、wp_send_json()を使用、配列をエコーする前にob_clean()を配置、配列を配列...しかし、それは常に文字列ajaxとしてArrayに入り、eachはそれを循環できません.

これは非常に単純なことであり、なぜ機能しないのか理解できません.他にJavaScriptやPHPのエラーや警告はなく、他はすべて正常に動作します.

I have a problem with WordPress and Ajax.

This is my JavaScript part (I trimmed it a bit):

var posts = $.ajax({
    type: 'POST',
    url: ajaxurl,
    async: false,
    dataType: 'json',
    data: { action: 'myAjaxFunc' },
    done: function(response) {
        return response;
    }
}).responseText;

$.each(posts, function() {
    $('#someSelect').append( $('<option</option>').text(this.name).val(this.id) );
});

My PHP code is as follows:

function myAjaxFunc() {

    $posts = get_posts( array(
        'posts_per_page'   => -1,
        'orderby'          => 'title',
        'order'            => 'ASC',
        'post_type'        => 'my-post-type',
        'post_status'      => array( 'publish', 'draft' )
    ) );

    $list = array();
    foreach ( $posts as $post ) {
        $list[] = array(
            'id'   => $post->ID,
            'name' => $post->post_title,
            'link' => get_permalink( $post->ID ),
        );
    }

    header("Content-type: application/json");
    echo json_encode( $list );
    die;
}
add_action( 'wp_ajax_nopriv_myAjaxFunc', 'myAjaxFunc' );
add_action( 'wp_ajax_myAjaxFunc', 'myAjaxFunc' );

The script gets the Ajax response from admin-ajax. Unfortunately the console throws an error when it gets to the each statement in the JavaScript code... it says:

"Uncaught TypeError: Cannot use 'in' operator to search for '4' in Array".

If I do a console.log of my "posts" var I get a string 'Array'. No matter how I pass the $list variable in PHP it will always return a string. The query returns posts elsewhere, so it's not empty. I tried without json_encode, with and without declaring header, using wp_send_json(), putting ob_clean() before echoing the array, putting the array into an array... But it always gets into ajax as a string Array and each cannot cycle through it.

This should be a very simple thing and I can't understand why it's not working. I don't have other JavaScript or PHP errors or warnings and everything else runs fine.

- http://www.example.com/wp-admin/admin-ajax.php?action=myAjaxFuncにアクセスすると何が表示されますか
  
  What do you see when you go to http://www.example.com/wp-admin/admin-ajax.php?action=myAjaxFunc
  - 0
  - 2014-11-17
  - czerspalace
- あなたの質問に何か進展はありますか?フォローアップしていただけませんか?
  
  Any progress on your question? Could you please follow up?
  - 0
  - 2015-04-15
  - kaiser
- ああ...これは5か月前のことです...私は投稿した翌日、BODA82の回答を少し使って、自分の質問に回答しました.正解としてマークしなかっただけです.@toschoは昨日、彼のフォローアップを追加しました.彼の答えが今も良いかどうかは確認できませんが、それは理にかなっています.
  
  oh... this is from 5 months ago... I did answer to my own question by the way the next day I posted it, using bits of BODA82 answer - I just didn't marked it as the correct answer; @toscho added his follow up much later yesterday I can't verify if his answer is also good now, it makes sense though
  - 0
  - 2015-04-16
  - unfulvio

3 回答

投票

2

2014-11-17

PHP関数はほぼそこにあります.ヘッダーを設定する必要はありません. (編集:また、get_posts()が実際に結果を返していると仮定します.)

 function myAjaxFunc() {

    $posts = get_posts( array(
        'posts_per_page'   => -1,
        'orderby'          => 'title',
        'order'            => 'ASC',
        'post_type'        => 'my-post-type',
        'post_status'      => array( 'publish', 'draft' )
    ) );

    $list = array();
    foreach ( $posts as $post ) {
        $list[] = array(
            'id'   => $post->ID,
            'name' => $post->post_title,
            'link' => get_permalink( $post->ID ),
        );
    }
    echo json_encode( $list );
    die;
}
add_action( 'wp_ajax_nopriv_myAjaxFunc', 'myAjaxFunc' );
add_action( 'wp_ajax_myAjaxFunc', 'myAjaxFunc' );

そしてあなたのJavascript:

 $.ajax({
    url: "<?php bloginfo('url'); ?>/wp-admin/admin-ajax.php",
    type: "POST",
    data: "action=myAjaxFunc",
    success: function(results) {
        var posts = JSON.parse(results);
        console.log(results);
        $.each(posts, function() {
            $('#someSelect').append( $('<option></option>').text(this.name).val(this.id) );
        });
    },
    error: function() {
        console.log('Cannot retrieve data.');
    }
});

Almost there with your PHP function. No need to set the header. (Edit: Also, assuming get_posts() is actually returning results.)

function myAjaxFunc() {

    $posts = get_posts( array(
        'posts_per_page'   => -1,
        'orderby'          => 'title',
        'order'            => 'ASC',
        'post_type'        => 'my-post-type',
        'post_status'      => array( 'publish', 'draft' )
    ) );

    $list = array();
    foreach ( $posts as $post ) {
        $list[] = array(
            'id'   => $post->ID,
            'name' => $post->post_title,
            'link' => get_permalink( $post->ID ),
        );
    }
    echo json_encode( $list );
    die;
}
add_action( 'wp_ajax_nopriv_myAjaxFunc', 'myAjaxFunc' );
add_action( 'wp_ajax_myAjaxFunc', 'myAjaxFunc' );

And your Javascript:

$.ajax({
    url: "<?php bloginfo('url'); ?>/wp-admin/admin-ajax.php",
    type: "POST",
    data: "action=myAjaxFunc",
    success: function(results) {
        var posts = JSON.parse(results);
        console.log(results);
        $.each(posts, function() {
            $('#someSelect').append( $('<option></option>').text(this.name).val(this.id) );
        });
    },
    error: function() {
        console.log('Cannot retrieve data.');
    }
});

JSON.stringify()を使用してデータを保存し、それをphpで読み取る必要がある場合.次のコードは私のために働いた.json_decode(html_entity_decode(stripslashes($jsonString)));

When you save some data using JSON.stringify() and then need to read that in php. The following code worked for me. json_decode( html_entity_decode( stripslashes ($jsonString ) ) );
- 0
- 2019-12-04
- Vishal Tanna

2

2015-04-15

抜け道があります.completeまたはsuccessの代わりにdoneを使用します:

 posts = $.ajax({
    type: 'GET',
    url: ajaxurl,
    async: false,
    dataType: 'json',
    data: { action : 'getHotelsList' },
    complete: function(results) {

問題が解決しない場合は、async:falseを削除してみてください.

There is a way out. Use complete instead of success or done:

posts = $.ajax({
    type: 'GET',
    url: ajaxurl,
    async: false,
    dataType: 'json',
    data: { action : 'getHotelsList' },
    complete: function(results) {

And try to remove async:false if the problem persists.

unfulvio · Accepted Answer · 2014-11-18

8

2014-11-18

BODA82の回答は役に立ちましたが、最終的には、JavaScriptコードでresponseTextをresponseJSONメソッドに置き換える必要があることに気付きました.以下の例では、Ajax応答の結果を変数に格納していました. JSONで応答を取得するための特定の方法があることを知りませんでした.このようにして、get_posts()の結果を含むオブジェクト/配列が文字列としてではなく正しく返されます:

 posts = $.ajax({
    type: 'GET',
    url: ajaxurl,
    async: false,
    dataType: 'json',
    data: { action : 'getHotelsList' },
    done: function(results) {
        // Uhm, maybe I don't even need this?
        JSON.parse(results);
        return results;
    },
    fail: function( jqXHR, textStatus, errorThrown ) {
        console.log( 'Could not get posts, server response: ' + textStatus + ': ' + errorThrown );
    }
   }).responseJSON; // <-- this instead of .responseText

自己への注意だけでなく、一般的なアドバイス:夕方に何かを修正できない場合は、就寝して本を読み、星を数える必要があることを示しています.答えは翌朝見つかるでしょう、早いほど良いです:D

BODA82's answer helped, but eventually I realized that I should have replaced responseText with responseJSON method in my JavaScript code. In the example below I was storing the Ajax response results in a variable. I didn't know there was a specific method to get the response in JSON. In a such way the object/array with get_posts() results is returned correctly and not as a string:

posts = $.ajax({
    type: 'GET',
    url: ajaxurl,
    async: false,
    dataType: 'json',
    data: { action : 'getHotelsList' },
    done: function(results) {
        // Uhm, maybe I don't even need this?
        JSON.parse(results);
        return results;
    },
    fail: function( jqXHR, textStatus, errorThrown ) {
        console.log( 'Could not get posts, server response: ' + textStatus + ': ' + errorThrown );
    }
   }).responseJSON; // <-- this instead of .responseText

Note to self, but also general advice: if you can't fix something in the evening it's a sign you should go to bed, read a book, and count stars. An answer will be found the next morning, the earlier the better :D