jQuery $.ajax request of dataType json will not retrieve data from PHP script

Question

I've been looking all over for the solution but I cannot find anything that works. I am trying to get a bunch of data from the database and then via AJAX autocomplete input fields in a form. To do this I've decided to use json, because why not, right? Alternatively I've been thinking to just send back a delimited string and then tokenise it, which in hind-sight would've been much easier and spared me the headache... Since I've decided to use json though, I guess I should stick with it and find out what went wrong! What happens is that when the get_member_function() is executed, an error pops up in an alert dialogue and reads "[object Object]". I've tried this also using the GET request, and by setting the contentType to ”application/json; charset=utf-8″. Alas, no dice. Can anyone please suggest what I am doing wrong? Take care, Piotr.

My javascript/jQuery function is as follows:

function get_member_info()
   {

   var url = "contents/php_scripts/admin_scripts.php"; 
   var id = $( "select[ name = member ] option:selected" ).val();

   $.ajax(
   {

      type: "POST",
      dataType: "json",
      url: url,
      data: { get_member: id },
      success: function( response ) 
      { 

          $( "input[ name = type ]:eq( " + response.type + " )" ).attr( "checked", "checked" );
          $( "input[ name = name ]" ).val( response.name );
          $( "input[ name = fname ]" ).val( response.fname );
          $( "input[ name = lname ]" ).val( response.lname );
          $( "input[ name = email ]" ).val( response.email );
          $( "input[ name = phone ]" ).val( response.phone );
          $( "input[ name = website ]" ).val( response.website );
          $( "#admin_member_img" ).attr( "src", "images/member_images/" + response.image );

      },
      error: function( error )
      {

         alert( error );

      }

   } );

}

and the relevant code in "contents/php_scripts/admin_scripts.php" is as follows:

   if( isset( $_POST[ "get_member" ] ) )
   {

      $member_id = $_POST[ "get_member" ];
      $query = "select * from members where id = '$member_id'";

      $result = mysql_query( $query );

      $row = mysql_fetch_array( $result );

      $type = $row[ "type" ];
      $name = $row[ "name" ];
      $fname = $row[ "fname" ];
      $lname = $row[ "lname" ];
      $email = $row[ "email" ];
      $phone = $row[ "phone" ];
      $website = $row[ "website" ];
      $image = $row[ "image" ];

      $json_arr = array( "type" => $type, "name" => $name, "fname" => $fname, "lname" => $lname, "email" => $email, "phone" => $phone, "website" => $website, "image" => $image );

      echo json_encode( $json_arr );

   }

Answer 1

I think I know this one...

Try sending your JSON as JSON by using PHP's header() function:

/**
 * Send as JSON
 */
header("Content-Type: application/json", true);

Though you are passing valid JSON, jQuery's $.ajax doesn't think so because it's missing the header.

jQuery used to be fine without the header, but it was changed a few versions back.

ALSO

Be sure that your script is returning valid JSON. Use Firebug or Google Chrome's Developer Tools to check the request's response in the console.

UPDATE

You will also want to update your code to sanitize the $_POST to avoid sql injection attacks. As well as provide some error catching.

if (isset($_POST['get_member'])) {

    $member_id = mysql_real_escape_string ($_POST["get_member"]);

    $query = "SELECT * FROM `members` WHERE `id` = '" . $member_id . "';";

    if ($result = mysql_query( $query )) {

       $row = mysql_fetch_array($result);

       $type = $row['type'];
       $name = $row['name'];
       $fname = $row['fname'];
       $lname = $row['lname'];
       $email = $row['email'];
       $phone = $row['phone'];
       $website = $row['website'];
       $image = $row['image'];

       /* JSON Row */
       $json = array( "type" => $type, "name" => $name, "fname" => $fname, "lname" => $lname, "email" => $email, "phone" => $phone, "website" => $website, "image" => $image );

    } else {

        /* Your Query Failed, use mysql_error to report why */
        $json = array('error' => 'MySQL Query Error');

    }

     /* Send as JSON */
     header("Content-Type: application/json", true);

    /* Return JSON */
    echo json_encode($json);

    /* Stop Execution */
    exit;

}

Answer 2

Try using jQuery.parseJSON when you get the data back.

type: "POST",
dataType: "json",
url: url,
data: { get_member: id },
success: function(data) { 
    response = jQuery.parseJSON(data);
    $("input[ name = type ]:eq(" + response.type + " )")
        .attr("checked", "checked");
    $("input[ name = name ]").val( response.name);
    $("input[ name = fname ]").val( response.fname);
    $("input[ name = lname ]").val( response.lname);
    $("input[ name = email ]").val( response.email);
    $("input[ name = phone ]").val( response.phone);
    $("input[ name = website ]").val( response.website);
    $("#admin_member_img")
        .attr("src", "images/member_images/" + response.image);
},
error: function(error) {
    alert(error);
}

Answer 3

The $.ajax error function takes three arguments, not one:

error: function(xhr, status, thrown)

You need to dump the 2nd and 3rd parameters to find your cause, not the first one.