Ajax using information from PHP

Question

I'm having trouble using the information I get from my PHP file after an AJAX call. I currently have the following AJAX code that triggers after clicking a button:

<script>
    $(document).ready(function(){
        $('.button').click(function(){
            $.ajax({
                  type: "POST",
                  url: "nano.php",
                  data: { action: "authenticate" }
                }).done(function( msg ) {
                  alert( "Done: " + msg );
                });    
        });
    });
</script>

Than, in the nano.php file I do some authentication and information fetching. In the end of my PHP code I do the following:

  print_r($member_info);
  print_r($activity_info);

This information (two arrays with a lot of information) appear in the alert box that is called in the Ajax done function, which means that this information is available in the client side.

I want to be able to treat the arrays and show the information on the page. Is print_r the right way to send the information? How can I treat and show the information in the arrays in my page after this?

Answer 1

To send an array from your PHP file back to Javascript through AJAX use:

echo json_encode($array);

Applies to strings too.

And change the expected response type to json in your jQuery.ajax call:

$.ajax({
  type: "POST",
  url: "nano.php",
  dataType: 'json',
  data: { action: "authenticate" }
}).done(function( msg ) {
   alert( "Done: ");
   console.log(msg); // <- javascript array or object
 }); 

(or send a application/json content-type header from PHP)

Answer 2

The correct way to do this is use a empty mark up in your html like <div id="response"></div>

In your php:

print_r(json_encode($member_info));
print_r (json_encode($activity_info));

And in your ajax call use this div to hold ajax reponse like this:

 $.ajax({
                  type: "POST",
                  url: "nano.php",
                  data: { action: "authenticate" }
                }).done(function( msg ) {
                  $("#response").html(msg);
                });    

Answer 3

Return a message in JSON, it's easier to manage it later in jQuery.

PHP:

$data = array( 'some_var' => 'some_value' );
echo json_encode( $data );
exit;

And then in jQuery:

<script>
$(document).ready(function(){
    $('.button').click(function(){
        $.ajax({
              type: "POST",
              url: "nano.php",
              data: { action: "authenticate" }
            }).done(function( msg ) {
                var data_object = JSON.parse(msg); // Create a Javascript object/array from the JSON
                // Here you can use the data inside the array/object
                alert( data_object.some_var );
            });    
    });
});
</script>