web-dev-qa-db-ja.com

からJSONデータを渡す WP に問い合わせる AJAX NULLエラーの原因

ボタンが押されたときにAJAX呼び出しからトリガーされるWP_Queryを現在使用しています。投稿メタフィールドlatlngは、Googleマップの位置データとして使用されます。クエリはAJAXがなくても問題なく出力されますが、結果を返すようにすることはできません。

私が受け取る応答 - [{name: "", lng: null, lat: null}, {name: "", lng: null, lat: null}]

さて、エラーはjson_encode段階で結果をJSONに変換するときのエラーであると確信していますが、確信が持てませんか？ AJAXにとって、少しでも助かります。

Function.php 

<?php
//Search Function

function ek_search(){
    $args = array(
        'orderby' => 'date',
        'order' => $_POST['date'], 
        'post_type' => 'property',
        'posts_per_page' => 20,
        'date_query' => array(
        array(
            'after' => $_POST['property_added']
        ),
    ),
    );

$query = new WP_Query( $args ); 
$posts = $query->get_posts();   

foreach( $posts as $post ) {
     $locations[] = array(
       "name" => get_the_title(),
       "lng" => get_field('loc_lng'),
       "lat" => get_field('loc_lat')
     );
 }     

$location = json_encode($locations);

echo $location;

die();

}

add_action( 'wp_ajax_nopriv_ek_search', 'ek_search' );
add_action( 'wp_ajax_ek_search', 'ek_search' );

形 

<form id="filter">

<button>Search</button>
<input type="hidden" name="action" value="ek_search">

</form>

_ js _ 

jQuery(function($){
    $('#filter').submit(function(){
        var filter = $('#filter');
        var ajaxurl = '<?php echo admin_url("admin-ajax.php", null); ?>';
        data = { action: "ek_search"};
        $.ajax({
            url: ajaxurl,
            data:data,
            type: 'post',
            dataType: 'json',
            success: function(response) {
            console.log(response);  
            }

        });
        return false;
    });
});
phpwp-queryajaxjson
2
scopeak

Admin-AJAXはJSON用に最適化されていません。答えをJSONにする必要がある場合は、代わりにREST-APIを使用してください。このAPIはデフォルトでJSONレスポンスを生成します。

あなたがしなければならないのは休憩路を登録して、URLにアクセスすることだけです：

add_action( 'rest_api_init', function () {
    //Path to REST route and the callback function
    register_rest_route( 'scopeak/v2', '/my_request/', array(
            'methods' => 'POST', 
            'callback' => 'my_json_response' 
    ) );
});

今、コールバック関数：

function my_json_response(){
    $args = array(
        'orderby' => 'date',
        'order' => $_POST['date'], 
        'post_type' => 'property',
        'posts_per_page' => 20,
        'date_query' => array(
            array(
                'after' => $_POST['property_added']
            ),
        ),
    );

    $query = new WP_Query( $args ); 
    if($query->have_posts()){
        while($query->have_posts()){
        $query->the_post();
            $locations[]['name'] = get_the_title();
            $locations[]['lat'] = get_field('loc_lng');
            $locations[]['lng'] = get_field('loc_lat');
        }
    }
    //Return the data
    return $locations;
}

これで、次のURLにアクセスしてJSONレスポンスを受け取ることができます。

wp-json/scopeak/v2/my_json_response/

テスト目的で、POSTメソッドをGETに変更してこのURLに直接アクセスできます。応答があった場合は、それをPOSTに戻して、JavaScriptで作業してください。

それで全部です。

4
Jack Johansson

まず第一に、どのようにして$_POST変数を得ていますかあなたはあなたのajax呼び出しであなたのdataオブジェクトにそれらを渡さなければなりません。例：

jQuery(function($){
$('#filter').submit(function(){
    var filter = $('#filter');
    var ajaxurl = '<?php echo admin_url("admin-ajax.php", null); ?>';
    data = { action: 'ek_search', date: date, property_added: property};
    $.ajax({
        url: ajaxurl,
        data:data,
        type: 'post',
        dataType: 'json',
        success: function(response) {
        console.log(response);  
        }

    });
    return false;
  });
});

参考のためにこちらの{ Article を参照してください。

1
Cesar Henrique Damascena

第一に、私は少し遅れて応答して本当に本当に申し訳ありません。

次に、シリアル化メソッドを使用してフォームの値を取得する必要があります。以下の例を確認してください。

<form id="filter">

<input type="button" name="smt" value="Submit" id="smt" />
<input type="hidden" name="action" value="ek_search">

</form>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var form=$("#filter");
$("#smt").click(function(){
$.ajax({
    type:"POST",
    url:form.attr("action"),
    data:form.serialize(),
    success: function(response){
        console.log(response);  
    }
});
});
});
</script>
0
Nikhil Saini