Data apparently is not being sent over AJAX POST - what am I doing wrong?

Question

EDIT: I've updated my code due to feedback from here, and it's no longer giving me an empty array but now it's simply giving me null.

EDIT 2: Someone in my organization solved this for me! Turns out I was using POST options that I didn't need. My working code is:

Frontend:

$.ajax({
    type: "POST",
    url: "update_data_ajax.php",
    data: {
        events: JSON.stringify(currentEventsRows)
    }
}).done(function(data) {
    console.log("Done");
    console.log(data);
});

Backend:

echo json_encode($_POST);

Original post:

I'm trying to make an AJAX POST request to post some data to a SQL table, but it doesn't seem like my POST request is actually sending anything because the PHP backend is simply giving me a null.

To try to narrow down the problem, I simplified my page down to a JavaScript frontend that posts an array of data and a PHP backend that simply returns the data. Here's the relevant part of my frontend webpage (update_data.php):

let currentEventsRows = [/* array of dicts of strings */];

$.ajax({
    method: "POST",
    url: "update_data_ajax.php",
    contentType: "application/json; charset=utf-8",
    dataType: "JSON",
    data: JSON.stringify{
        events: currentEventsRows
    },
    processData: false
}).done(function(data) {
    console.log("Done");
    console.log(data);
});

Here's my PHP backend (update_data_ajax.php):

<?php
$_POST = json_decode(file_get_contents("php://input"), true);
echo $_POST;
?>

And here's the console output:

Done
null

What am I doing wrong? I feel like I'm missing something totally simple.

You have a typo in `datatType` - is this in actual code or just an accidental mistake when transferring code to the question? — El_Vanja, Dec 14 '20 at 20:03
That was a mistake when transferring the code. Thanks for pointing that out, I'll update my question. — Walt Gottlieb, Dec 14 '20 at 20:17
Does this answer your question? [Receive JSON POST with PHP](https://stackoverflow.com/questions/18866571/receive-json-post-with-php) — ADyson, Dec 14 '20 at 23:50
I should have been more specific. That question's answer was basically what @Musa (below) suggested. But thanks for suggesting it - it actually did make a difference in my code as it's no longer returning an empty array, but now it's simply returning null. I've edited my original post. — Walt Gottlieb, Dec 15 '20 at 15:03
Try also removing processData:false as that shouldn't be needed. Also, use `echo json_last_error_msg();` at the end of your PHP to see if anything went wrong while decoding the data. — ADyson, Dec 15 '20 at 17:09
Also `dataType: "JSON"` is undesirable in the JS because currently your PHP is not returning JSON. — ADyson, Dec 15 '20 at 17:10
Thanks for the suggestions. ```json_last_error_msg()``` gives me ```Syntax error``` (but that's all it says - it isn't more specific as to where the error is). But I checked the JSON string that was being sent to the backend and it doesn't appear that there are any syntax errors in it. — Walt Gottlieb, Dec 15 '20 at 21:03
I suggest showing the JSON here (the version received by PHP not the version you sent - they _should_ be identical but...) so we can take a look at it. — ADyson, Dec 16 '20 at 07:14

Musa · Answer 1 · 2020-12-15T17:27:22.127

You have 2 issues here, 1. You aren't sending the JSON properly. 2. You're not reading the JSON properly.

You have to encode your JSON to send in your ajax call

let currentEventsRows = [/* array of dicts of strings */];

$.ajax({
    method: "POST",
    url: "update_data_ajax.php",
    contentType: "application/json; charset=utf-8",
    dataType: "JSON",
    data: JSON.stringify({
        events: currentEventsRows
    })
    // processData: false -- not needed since the JSON is a string
}).done(function(data) {
    console.log("Done");
    console.log(data);
});

Your JSON data is not populated in the $_post superglobal(this only happens for multipart/form-data and application/x-www-form-urlencoded), so you have to read it from php://input

<?php
echo file_get_contents('php://input');
?>

I've made the changes you suggested, but now the output is "null" instead of "[]". — Walt Gottlieb, Dec 15 '20 at 14:39

score 0 · Accepted Answer · answered Dec 16 '20 at 14:35

Someone from my organization actually solved this for me. Turns out I was using POST options that I didn't need.

Frontend:

$.ajax({
    type: "POST",
    url: "update_data_ajax.php",
    data: {
        events: JSON.stringify(currentEventsRows)
    }
}).done(function(data) {
    console.log("Done");
    console.log(data);
});

Backend:

echo json_encode($_POST);

Data apparently is not being sent over AJAX POST - what am I doing wrong?

2 Answers2