Menu
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.
[CODE]
<!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:
[CODE]
<!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