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>

what do u have when you alert the data variable in your success — mlwacosmos
– mlwacosmos, Commented Dec 11, 2012 at 16:33

a0viedo · Accepted Answer · 2015-03-27 01:30:09Z

2

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.

edited Mar 27, 2015 at 1:30

answered Dec 11, 2012 at 16:31

a0viedo

1981 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bkbarton Over a year ago

@aOviedo, I will look into adding the stringify the way you have mentioned. Thanks for your help.

user400654 · Accepted Answer · 2012-12-11 16:34:44Z

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 = {};

jaysqrd · Accepted Answer · 2012-12-11 16:37:16Z

1

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.

answered Dec 11, 2012 at 16:37

jaysqrd

3754 silver badges13 bronze badges

1 Comment

bkbarton Over a year ago

Changing the datatype did help. Thanks for the info. +1

Collectives™ on Stack Overflow

Printing JSON array to screen via ajax to php script

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related