AJAX JSON Parser error PHP

Question

Here is my code. I keep getting a json parser error. The ajax never goes into done. Help!

<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: Error message shows this in the console:

"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"

What is the exact response of the request? You can check it in the network tab of the console. Also note that your PHP code never sets the $action variable, so it will never enter your if statement — Rory McCrossan
– Rory McCrossan, Commented Apr 8, 2016 at 7:12
In the response, there is SyntaxError:JSON.parse:unexpected non-whitespace character after JSON data at line 2 column 5 of the JSON data. — coffeeak
– coffeeak, Commented Apr 8, 2016 at 7:16
I removed the headers. While there is no SyntaxError in the response, it still goes to the ajax fail. — coffeeak
– coffeeak, Commented Apr 8, 2016 at 7:18

Alex Rock · Accepted Answer · 2016-04-08 08:08:25Z

3

First, you should print your headers BEFORE sending any body, else you may encounter classical headers errors:

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

For this you should move your headers() call BEFORE print json_encode(...), like this:

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

Next, as you might have other instructions runned after printing your JSON, you should, as @PranavBhaat said, add a die or exit statement at the end of your script so you're sure nothing else is outputted and the JSON is correctly parsed by your AJAX call.

answered Apr 8, 2016 at 8:08

Alex Rock

8307 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pranav Bhatt · Accepted Answer · 2016-04-08 08:03:48Z

0

You need to end-up your ajax response call with exit();

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

and print will let you formatted output which not required, I think.

so just echo also been working.

answered Apr 8, 2016 at 8:03

Pranav Bhatt

7454 silver badges8 bronze badges

Collectives™ on Stack Overflow

AJAX JSON Parser error PHP

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related