Printing JSON array to screen via ajax to php script

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.