I'm trying to make an AJAX request to my localhost server. Here is the code for the page that is requested, ajaxresponsecontent.php. The content is queried from a MySQL database then encoded into JSON using PHP.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="../javascript/prototype.js"></script>
<?php
@ $db = mysqli_connect('localhost', 'root', '', 'mealchamp');
$query = "SELECT * FROM globalfood WHERE foodid = 1";
$result = mysqli_query($db, $query);
$row = mysqli_fetch_assoc($result);
$reqVar = json_encode($row);
$reqVar = "'" . $reqVar . "'";
echo $reqVar;
?>
</head>
<body>
</body>
</html>The output of the content page when run in a browser is serialized JSON:
'{"foodid":"1","food":"Mozzarella cheese","brand":"Black Diamond","ftype":"Dairy & Alternatives","servamt":"1\/4 inch cube","ss":"30.0","cal":"110.0","fat":"8.0","sat":"5.0","trans":"0.2","chol":"25.0","sod":"230.0","carb":"1.0","fib":"0.0","sug":"0.0","pro":"8.0"}'
The second page, ajaxresponsecaller.php, makes an ajax request for this previous page using the Prototype framework. the code for the requesting page is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="../javascript/prototype.js"></script>
<script type="text/javascript"><!--
new Ajax.Request('ajaxrequestcontent.php',
{
method:'get',
onSuccess: function(transport){
var response = transport.responseText || "no response text";
document.write(response);
var try1 = response.evalJSON();
document.write(try1.food);
},
onFailure: function(){ alert('Something went wrong...') }
});
--></script>
</head>
<body>
</body>
</html>The PROBLEM is that the document.write(response) works fine in that it outputs the JSON string just how its supposed to be, same output as i showed above for the previous page. but when i try to use Prototypes' evalJSON to convert it to an object, something is going wrong. document.write(try1.food); gives no output.
What am i doing wrong exactly? could u provide an example? been working at this for hours can't figure out the problem.
Thanks so much, G