Printing JSON array to screen via ajax to php script - php

Question

I've been comparing my code to other examples on the web and I still can't find my errors.
When I load the page and click submit, nothing happens on the screen. However, in Firebug I receive the POST 200 OK and the PHP script that should be on screen is spelled out in the POST response tab.
Since Firebug is responding appropriately, I am confused as to what is wrong.
Basic HTML form
<form id="form" action="" method="post">
<input type="submit" name="submit" id="submit" value="submit"/>
</form>
<div id="results"></div>
jQuery creates a JS object. The object is sent through JSON.stringify and JSON.parse. The submit event handler fires off the $.ajax. JSON data is passed to ok.php and it should return the PHP info called in the script, in theory.
var addIt = new Object();
addIt.one = "one";
addIt.two = 2;
addIt.three = addIt.one +" + "+ addIt.two +" = "+ "three";
$jsonAddIt = JSON.stringify(addIt);
$jsonAddIt = JSON.parse($jsonAddIt);
$('#submit').click(function(e){
e.preventDefault();
$.ajax({
type: 'POST',
url: 'ok.php',
dataType:'json',
data: ({ json:$jsonAddIt }),
success:function(data) {
$("#results").html(data);
}
});
});
PHP
<?php
$ajaxInfo = $_POST["json"];
if ($ajaxInfo !="")
{
echo "info transfered";
}
else
echo "nothing";
?>
<div id="returned">
<?php print_r($ajaxInfo); ?>
</div>

Answer 1

Setting the dataType to JSON will make jQuery ajax request to parse it automatically to a Javascript object. You have two solutions here. Either change the dataType of the ajax request:
$.ajax({
type:'POST',
url: 'ok.php',
dataType:'text',
data: ({json:$jsonAddIt}),
success:function(data){
$("#results").html(data);
}
});
Or you could use this library to stringify the object:
$.ajax({
type:'POST',
url: 'ok.php',
dataType:'json',
data: ({json:$jsonAddIt}),
success:function(data){
$("#results").html(JSON.stringify(data));
}
});
Hope it helps.

Answer 2

These two lines are not needed, the second one undoes the first one. just remove them both.
$jsonAddIt = JSON.stringify(addIt);
$jsonAddIt = JSON.parse($jsonAddIt);
This line should be giving you [object Object] in your div if the ajax request was successful, else it will do nothing (which is your current outcome).
$("#results").html(data)
Currently your ajax request is actually failing because it is not returning the expected JSON datatype. If you change your dataType to "html" it will work.
$.ajax({
type:'POST',
url: 'ok.php',
dataType:'html',
data: {json:addIt},
success:function(data){
$("#results").html(data);
}
});
Also,
var addIt = new Object();
should be
var addIt = {};

Answer 3

I think the issue is your dataType. By saying json, you're telling jQuery that the content you're expecting back is json. Where php is likely setting the content-type to html in the header. You should be able to remove that and jQuery will automatically figure it out from the header of the response.