How do I use jQuery.post to send JSON data to a php script?

Question

This is in my javascript code. The variable dataStore is a valid JSON object and the JSON.stringify works fine - I tested with console.log() to be sure.

I'm new to jQuery and have not written a CGI application in awhile so I may be doing something incorrect here.

jQuery.post("taskmanager.php", JSON.stringify(dataStore), function (returnData) { 
    alert(returnData); 
});

The taskmanager.php script resides in the same folder as my other files ( taskmanager.html, taskmanager.css, taskmanager.js ). This folder resides on my Windows7 folder E:\\JamesLaderoute\\MySoftware\\WebApp\\TaskManager\\code

I'm not sure what to put into the taskmanager.php script. I thought I could do something simple like:

<?php

    $data = $_GET["data"];

    echo "done";

?>

What I don't understand is, how will the php script know that my JSON stringify information was called "data".

Also, I thought jQuery.post() takes the script name as the first argument, and then the data to be sent to the script followed by a callback function that gets called when the script returns data via echo calls.

The alert() does get called but it's displaying the php script rather than the string "done"

I've searched the internet (a little bit) and found examples that use something called AJAX to send data to a script like php.

I learn best with a small example, is there a good example that points out what I'm missing? How do I get this to work?

Eventually I plan on taking whatever the JSON data is and saving it to a file on the server. Do I need to run this all with a real server? Right now I'm not using one but I do have WAMP setup so I could use that if that is what is required.

Thank you to everyone who posted answers to my problem. I'm editing this post to show the actual code I ended up using to get my application working.

JavaScript code:

alert(returnData); });
        $.ajax({
            url : "taskmanager.php" ,
            type : 'POST',
            data : JSON.stringify(dataStore),
            success : function(res) {
                    // Successfully sent data
                  console.log(res);
            },
            error: function(err) {
                // Unable to send data
                  console.log(err);
            }
        });

PHP code:

<?php

    $contents = file_get_contents('php://input');
    $data = json_decode( $contents );

    file_put_contents( "taskdata.json",  "data=".$contents );

    echo "<br>done</br>";

?>

Answer 1

Default Content-Type for jQuery ajax data is application/x-www-form-urlencoded which is very easy to work with in php using $_GET , $_REQUEST and $_POST and doesn't require stringifying as json

Pass an object directly to $.post (or any of the $.ajax methods) and jQuery will encode it internally

var data ={foo:'bar'};
$.post('taskmanager.php', data, function(resp){
   console.log(resp);
})

php

echo $_POST['foo'];

---

If you want to work with json only you need to set appropriate Content-Type

$.ajax({
   url:'...',
   method:'post',
   contentType:'application/json',
   dataType:'json',
   data: JSON.stringify(data)
}).done(function(resp){
   console.log(resp);
});

Then in php use:

$data = json_decode(file_get_contents('php://input'));
$data['foo'] ='Some new value';
echo json_encode($data);

Answer 2

Using jQuery you can send data to your end point using the POST protocol. Example below

$.ajax({
    url : 'taskmanager.php',
    type : 'POST',
    data : JSON.stringify(dataStore),
    success : function(res) {
        // Successfully sent data.
        console.log(res);
    },
    error: function(err) {
        // Unable to send data.
        console.log(err);
    })
});

You may also use the $.post method, its just a preference. $.ajax provides with some extra flexibility, in case you maybe want to update your protocol to GET instead of post or numerous other instances...

More info on this here: http://forum.jquery.com/topic/what-should-i-use-post-vs-ajax

Answer 3

I usually use the following to POST JSON to php...

$.post("publishdata.php", {
    dataArray: arrayOfStuff,
    meetingTitle: meetingTitle,
    meetingDate: meetingDate
},
function(data, status, response) {

     console.log(response);


});