Pass a PHP string to a Javascript variable with Ajax

Question

I retrieve data from my database as such:

while($row = mysql_fetch_array($result))
{
    echo $row['uid'];
    echo $row['note'];
}

and I print it with ajax as such:

xmlhttp.onreadystatechange = function () {
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          console.log(xmlhttp.responseText)
      }
   }

but the problem is that the uid and note its one string. For example:

"45 note goes here"

How can I print each row separately. Something like this:

xmlhttp.onreadystatechange = function () {
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          console.log(  <?php echo json_encode($row['uid']); ?>  );
          console.log(  <?php echo json_encode($row['note']); ?>  );
      }
   }

Answer 1

You're pretty much right. In your php script, return a json string, then in your javascript you can parse that string into a javascript object. So:

$json = array();
while($row = mysql_fetch_array($result))
{
   $json['uid']=$row['uid'];
   $json['note']=$row['note'];
}
print json_encode($json);

Then

xmlhttp.onreadystatechange = function () {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      var jsontext = xmlhttp.responseText;
      var json = JSON.parse(jsontext);
      console.log(json.uid)
      console.log(json.note)
  }
}

Answer 2

Return $row as a json object.

while($row = mysql_fetch_array($result))
{
    $data[] = $row;
}
echo json_encode($data);

In your javascript you should now be able to use xmlhttp.responseText.0.uid (you probably will want to loop over the different rows).

Note: I have never done this with pure javascript, only with jQuery and do not know for sure if this will work as is. You might need to send an additional header that indicates the response is JSON (header('Content-type: application/json');), you might need to parse the responseText first so you can interpret it as an object.

Answer 3

You are trying to json_encode the individual keys in the array, try doing json_encode($row); else you will have a JSON array ['my user id'] rather then a JSON object {uid:'my user id'}

Also try using jQuery and you will be able to parse the response as a JSON object.

$.post('myurl', {mydata}, function (jsonArray){/*success function*/}, 'json');

Answer 4

Any chance to use a JSON parser on client side (jQuery's one for example) and have on your JavaScript something like

for(i=0; i<rows.length; i++)
console.log(rows[i])

where rows is $.parseJSON(xmlhttp.responseText)