AJAX JSON Parser Fehler PHP

Question

Hier ist mein Code. Ich bekomme immer einen JSON Parser Fehler. Der Ajax geht nie fertig. Hilfe!

<input type="submit" class="button" name="insert" value="load"/> 
<div id="wines"> 
    <!-- Javascript will print data in here when we have finished the page -->  
</div> 

jQuery(document).ready(function() { 
    var $ = jQuery; 
    var baseUrl = [location.protocol, '//', location.host, location.pathname].join(''); 

    $('.button').click(function(){ // This event fires when a button is clicked 
     var button = $(this).val(); 
     $.ajax({ // ajax call starts 
      url: baseUrl, // JQuery loads serverside.php 
      data: 'action=' + $(this).val(), // Send value of the clicked button 
      dataType: 'json', // Choosing a JSON datatype 
     }).done(function(data) { // Variable data contains the data we get from serverside 
      console.log("j");  
     }).fail(function(data,error) { 
      console.log(error); 
     }) 
    }); 
}); 

<?php 
    $action = req('action'); 
    // Red wine table 
    $red = array('Chianti', 'Barolo', 'Pinot Noir'); 
    $white = array('Chardonnay', 'Cava', 'Chablis'); 

    // Combine red and white tables into one multidimensional table 

    $winetable = array(
     "red" => $red, 
     "white" => $white, 
    ); 

    // Finally depending on the button value, JSON encode our winetable and print it 
    if ($action == "load") { 
      print json_encode($red); 
      header('Content-Type: application/json'); 
    } 
?> 

UPDATE: Fehlermeldung zeigt dies in der Konsole:

"Initializing System Events for WUH..." common_admin.js:22 
"["Chianti","Barolo","Pinot Noir"] 
<input type="submit" class="button" name="insert" value="load"/> 
<div id="wines"> 
    <!-- Javascript will print data in here when we have finished the page --> 
</div> 


<script type="text/javascript"> 
jQuery(document).ready(function() { 

    var $ = jQuery; 
    var baseUrl = [location.protocol, '//', location.host, location.pathname].join(''); 

    $('.button').click(function(){ // This event fires when a button is clicked 
    var button = $(this).val(); 
    $.ajax({ // ajax call starts 
     url: baseUrl, // JQuery loads serverside.php 
     data: 'action=' + $(this).val(), // Send value of the clicked button 
     dataType: 'json', // Choosing a JSON datatype 
    }) 
    .done(function(data) { // Variable data contains the data we get from serverside 
     console.log("j");  
    }) 
    .fail(function(data,error) { 
     console.log(data.responseText+error); 
    }) 
    }); 
}); 
</script>parsererror" 

Answer 1

Zunächst sollten Sie Ihre Header vor dem Versenden jede Stelle drucken, sonst können Sie klassische Header Fehler auftreten:

Warning: Cannot modify header information - headers already sent by (...)

Dazu sollten Sie Ihre headers() anrufen, bevor print json_encode(...), wie diese bewegen:

// Finally depending on the button value, JSON encode our winetable and print it 
if ($action == "load") { 
     header('Content-Type: application/json'); 
     print json_encode($red); 
} 

Als nächstes, wie Sie möglicherweise andere Anweisungen nach dem Drucken Ihres JSON ausgeführt haben, sollten Sie, wie @PranavBhaat sagte, eine die oder 10-Anweisung am Ende Ihres Skripts hinzufügen, damit Sie sicher sind nichts anderes wird ausgegeben und der JSON wird von Ihrem AJAX-Aufruf korrekt analysiert.

Answer 2

Sie benötigen eine Ajax-Antwort Anruf beenden-up mit exit();

if ($action == "load") { 
      echo json_encode($red); 
      exit(); 
} 

und drucken werde ich formatiert Ausgabe, die nicht erforderlich ist, denke ich.

so nur Echo auch funktioniert.