fetch does not send post data - javascript

I have the following js snippet:
fetch('/some/webhook', {
method: 'post',
headers: { 'content-type': 'application/json' },
body: JSON.stringify({test:'1'})
}).then(function(res) {
// do something here
}).then(function(data) {
// do something else here
});
For hours I am trying to get the body to my server, but the listening script sees nothing in the $_POST variable. The webhook receives the request. A simple:
die (var_dump($_POST));
results in an empty array shown in the console where I would have expected to see the variable test with value 1.
What is wrong?

The way you are sending your data, php will not populate de _POST variable
If you want to send json content, you should do
$data = json_decode(file_get_contents('php://input'), true);
echo $data["test"];
Alternative solution, if you'd rather have your data in _POST you should send a multipart/form-data header and use a new FormData(); as the body of fetch.

Related

Javascript fetch api payload not delivered

console.log("data ", data); // returns an object in JSON format {propertyName: propertyValue}
dataString = JSON.stringify(dataString); //correctly stringified json
let response = await fetch('updateRecevingEntry.php',
{
method:'POST',
headers: {'Content-Type':'application/json'},
body: dataString
}).then(response=>response.json());
however I get back an undefined index on the php side.
where the php is:
$matkey = $_POST['materialKey'];
returns
<b>Notice</b>: Undefined index: materialKey in <b>path/updateRecevingEntry.php</b> on line <b>3</b><br />
for all the data... none of it is getting caught.
so why is the _POST['propertyName'] not catching the stringData from the body?
I've tried a few variations, such as sending the data instead of the string data messing with the header, but I can't seem to figure out how to send the payload such that _POST['propertyName'] catches the data in the body.
I was using $.ajax from jquery before, and it was working: but I'm in the process of refactoring that out.
the Fetch api is new to me. where am I going wrong. I also don't want to parse a json object on the php side.
after reading one of the answers, I got it to work in one case,
but
let response = await fetch('updateRecevingEntry.php',
{
method:'POST',
headers: {'Content-Type':'application/json'},
body: sendData
}).then(response=>response.json());
and the php
$postData = json_decode(file_get_contents("php://input"), true);
var_dump($postData);
just returns a big fat NULL.
Edit two: turns out it just needs to actually be encoded via JSON.stringify(sendData). Since the. It works as expected.
The first thing I've noticed is that you're not using the right variable (you're using stringData instead of dataString):
dataString = JSON.stringify(dataString); //correctly stringified json
let response = await fetch('updateRecevingEntry.php', {
method:'POST',
headers: {'Content-Type':'application/json'},
body: dataString
}).then(response=>response.json());
Though you shouldn't need to stringify it as you're sending it with json headers.
Additionally, have you tried instead of $_POST, using php://input?
From PHP.net:
php://input is a read-only stream that allows you to read raw data from the request body. In the case of POST requests, it is preferable to use php://input instead of $HTTP_RAW_POST_DATA as it does not depend on special php.ini directives. Moreover, for those cases where $HTTP_RAW_POST_DATA is not populated by default, it is a potentially less memory intensive alternative to activating always_populate_raw_post_data. php://input is not available with enctype="multipart/form-data".
So you would use it like so:
$postData = json_decode(file_get_contents("php://input"), true);
$matkey = $postData['materialKey'];
This reads the body of the POST request as a JSON string then converts it to a PHP array.

how can i acces the JSON data of POST request sent through ajax to a php file and store them in an array variable?

I send json data through ajax to a php file called in case 'receive.php'.
user_name , user_id, etc. are defined on top of my script page you may change by anything else.
Here is my js code :
const data = {
name: user_name,
id: user_id,
score: success,
time: endTime
};
const jsonString = JSON.stringify(data);
const xhr = new XMLHttpRequest();
xhr.open("POST", "receive.php", true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(jsonString);
This is my php file
<?php
header('Content-Type' , 'application/json');
$requestPayload = file_get_contents('php://input');
$json = json_decode($requestPayload , true);
$not = 'gsvcgdsqc';
//This gives NULL
var_dump($json);
echo $not;
?>
in the browser (network), i can see sent data :
But when i try to store it in a variable and display it, it gives null :
So how can I access and store those data in a variable so I can use them after for other actions?
Since you're using jQuery:
$.ajax({
type: 'POST',
url: 'receive.php',
data: data
});
You can then get the data with $_POST, no need for json.
It's showing as NULL when you type the URL into the address bar of the browser.
That's a completely different (GET) request to the POST request you make with JavaScript.
The request body of the POST request (containing the JSON) doesn't exist on the GET request, so of course it is NULL.
If you want to see the response to the POST request you made, then look in the Preview tab instead of the Headers tab in the Network monitor.
If you want to store the data somewhere and then read it back on a subsequent request then you need to do that explicitly by writing code to do it.
Start by picking somewhere to store it (such as a session or a database).

fetch method not posting as expected, compared to jQuery ajax post method

I am eager to use the new fetch method and I understand it can be used for all http method calls to a Rest endpoint.
So I have the following very simple API endpoint which I know works, get and post requests work. The issue I am having is getting the post request to work on the fetch method.
My code for the fetch method is
var ingredient = {
'name': 'Salt',
}; // a JSON object used as the body for the post request
fetch('http://pantler-180711.nitrousapp.com/api/v1/Ingredients',
{
method: "POST",
body: JSON.stringify( ingredient )
})
.then(function(res){ console.log( 'Data posted') })
I then get the following error message. 422 (Unprocessable Entity)
If on the other hand I do something very similar but this time using the classic jQuery ajax post method it works.
$.ajax({
url: 'http://pantler-180711.nitrousapp.com/api/v1/Ingredients',
type: 'POST',
data: 'name=Salt', // or $('#myform').serializeArray()
success: function() { console.log('Data posted'); }
});
Any help here would be appreciated, it feels like I am missing something small here, and documentation on fetch method is scant on the web.
The two request sends two different post bodies one is application/x-www-form-urlencoded (jQuery) and the other is application/json.
You'll have to change the fetch call to send the same type of data as the $.ajax call.
You may have to explicitly set the content type in the fetch request.
var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/x-www-form-urlencoded");
var searchParams = new URLSearchParams();
searchParams.append("name", "Salt");
fetch('http://pantler-180711.nitrousapp.com/api/v1/Ingredients',
{
method: "POST",
headers: myHeaders,
body: searchParams
})
.then(function(res){ console.log( 'Data posted') })

Ajax post response coming back successfully - can't log/print to screen

I'm successfully posting data to the server via $.post(). When I attempt to do anything with the response, I get nothing. No console log. Can't replace text or HTML with the data. Nothing.
Here's the post:
$.post(myUrl, {myVar: myVar}, function(data) {
console.log(data);
});
And here's the response:
It may not be able to "guess" the data type as the default 4th parameter not set implies. set dataType parameter
$.post(myUrl, {myVar: myVar}, function(data) {
console.log(data);
}, 'text');
Also be sure that it returns a 200 OK response from the server or else success won't run.
You need to modify the response (probably) into a JSON format so that you can catch it. PHP's header for JSON is:
header("Content-Type: application/json"); //Set header for outputing the JSON information
You will need to include that in your PHP file that you are sending a request to. You may also need to specify the headers content in the post request, as I mainly use Angular, I'm a bit unsure of what the AJAX header for this case, but try something like:
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }

serialize data from AJAX request to PHP

My problem is very common. I must be doing some silly mistake somewhere but I am not able to figure it out.
I am send my form data in serialized form but it is not coming to PHP at all.
Angular JS code:
saveForm: function() {
var str = $('#feedbackForm').serializeArray();
alert(JSON.stringify(str)); // here I am getting my data properly
return $http({
method :'POST',
url:'http://localhost/api?module=form&app_id=APP001&action=save&formid=2&user_id=3',
data: str
});
}
PHP
$log->info($_REQUEST); // I am getting all GET parameters correctly
tried this also
$log->info($_POST);
it is not printing my data. why?
By default, the $http will send the data as application/json, which won't be recognized by the $_POST in PHP.
You have to choose either sending the data as form data like this:
return $http({
method: 'POST',
url: 'http://localhost/api?module=form&app_id=APP001&action=save&formid=2&user_id=3',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
data: str
});
Or don't use the $_POST but read and parse input directly in PHP like this:
$rawInput = file_get_contents('php://input');
$data = json_decode($rawInput);
Hope this helps.

Categories