jQuery ajax POST request to apache PHP server not receiving data - php

Question

This js jQuery script is properly formatting the form data to an object and sending it to my PHP code.
$("#formSignup").submit(function(e){
// Map the array into a properly formatted object
var data = {};
$.map($(this).serializeArray(),function(n, i){
data[n.name] = n.value;
});
// Send the http request
$.ajax({
type: "POST",
url: "api/signup.php",
data: JSON.stringify(data),
contentType: "application/json",
success: function(response){
//console.log(JSON.parse(response));
console.log(response);
},
failure: function(err){
console.error(err);
}
});
e.preventDefault(); // Don't submit defaultly
});
However PHP is unable to receiving the data. print_r($_POST) will print an empty array and the values are not accessible. It's not getting a response from the wrong file either.
That is pretty weird considering that the XmlHttpRequest recorded by the mozilla dev console is clearly posting the JSON data.
Other questions have been answered by stating redirects made by the server. However I haven't done anything at all with these settings and I got post requests working on the same server with my own function a while back.

Answer 1

Remove contentType property from your ajax object.
To serialize data just use $(this).serialize().
$("#formSignup").submit(function(e){
var data = $(this).serialize();
// Send the http request
$.ajax({
type: "POST",
url: "api/signup.php",
data: data,
success: function(response){
console.log(response);
},
failure: function(err){
console.error(err);
}
});
e.preventDefault(); // Don't submit defaultly
});
After that you should be able to successfully see your data inside $_POST variable.