web-dev-qa-db-fra.com

Passer des données JSON à partir de WP Requête dans AJAX causant des erreurs NULL

J'utilise actuellement un WP_Query qui déclenchera un appel AJAX lorsqu'un bouton est enfoncé. Les champs post-méta latlng seront utilisés comme données de localisation pour une carte Google. La requête génère très bien sans AJAX mais ne semble pas pouvoir l’obtenir pour renvoyer les résultats.

La réponse que je reçois - [{name: "", lng: null, lat: null}, {name: "", lng: null, lat: null}]

Maintenant, je crois que l’erreur est lors de la transformation des résultats en JSON au stade json_encode, mais vous n’êtes pas trop sûr? Toute aide serait formidable, assez nouvelle pour 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' );

Forme 

<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 n'est pas optimisé pour JSON. Si vous avez besoin que votre réponse soit en JSON, utilisez plutôt l'API REST. Cette API génère une réponse JSON par défaut.

Tout ce que vous avez à faire est d’enregistrer une route de repos et d’accéder à l’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' 
    ) );
});

Maintenant, la fonction de rappel:

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;
}

Maintenant, vous pouvez obtenir votre réponse JSON en visitant l'URL suivante:

wp-json/scopeak/v2/my_json_response/

À des fins de test, vous pouvez modifier la méthode POST en GET et accéder directement à cette URL. Si vous obtenez une réponse, remettez-la de nouveau en POST et travaillez sur votre javascript.

C'est tout.

4
Jack Johansson

Tout d’abord, comment obtenez-vous les variables $_POST? vous devez les transmettre dans votre objet data lors de votre appel ajax. Exemple:

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;
  });
});

Voir ceci Article pour référence.

1
Cesar Henrique Damascena

Tout d'abord, je suis vraiment désolé d'avoir répondu un peu en retard.

Deuxièmement, vous devez obtenir les valeurs de votre formulaire à l'aide de la méthode sérialiser. Consultez l'exemple ci-dessous.

<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