webentwicklung-frage-antwort-db.com.de

Übergabe von JSON-Daten von WP Abfrage in AJAX NULL-Fehler verursachen

Ich verwende derzeit einen WP_Query, der durch einen AJAX -Aufruf ausgelöst wird, wenn eine Taste gedrückt wird. Die Post-Meta-Felder latlng werden als Standortdaten für eine Google-Karte verwendet. Die Abfrage gibt einwandfrei ohne AJAX aus, scheint jedoch nicht zu veranlassen, dass die Ergebnisse damit zurückgegeben werden.

Die Antwort, die ich erhalte - [{name: "", lng: null, lat: null}, {name: "", lng: null, lat: null}]

Jetzt glaube ich, dass der Fehler bei der Umwandlung der Ergebnisse in JSON in der json_encode-Phase liegt, aber nicht zu sicher ist? Jede Hilfe wäre großartig, ziemlich neu für 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' );

Bilden 

<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 ist nicht für JSON optimiert. Wenn Sie eine Antwort in JSON benötigen, verwenden Sie stattdessen die REST-API. Diese API generiert standardmäßig eine JSON-Antwort.

Sie müssen lediglich eine Restroute registrieren und auf die URL zugreifen:

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

Nun die Rückruffunktion:

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

Jetzt können Sie Ihre JSON-Antwort erhalten, indem Sie die folgende URL aufrufen:

wp-json/scopeak/v2/my_json_response/

Zu Testzwecken können Sie die Methode POST in GET ändern und direkt auf diese URL zugreifen. Wenn Sie eine Antwort erhalten, ändern Sie diese in POST und arbeiten Sie an Ihrem Javascript.

Das ist alles.

4
Jack Johansson

Wie erhalten Sie zuerst die Variablen $_POST? Sie müssen sie bei Ihrem Ajax-Aufruf in Ihrem Objekt data übergeben. Beispiel:

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

Siehe diesen Artikel als Referenz.

1
Cesar Henrique Damascena

Erstens tut es mir sehr leid, dass ich etwas spät antworte.

Zweitens müssen Sie die Werte Ihres Formulars mithilfe der Serialisierungsmethode abrufen. Überprüfen Sie das folgende Beispiel.

<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