Im sure im missing something simple, but so far struggling to see what...
I am wanting to POST some form field entries to a server in JSON format. I am currently using:
$(document).ready(function () {
$("#newEnquiery").submit(function (event) {
event.preventDefault();
$.ajax({
url: 'SERVER-URL-HERE',
type: 'POST',
data: JSON.stringify({ "name": $('#name').val(), "emailAddress" : $('#emailAddress').val(), "address" : $('#address').val() }),
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function(data, textStatus, jQxhr){
console.log('Sent');
},
error: function( jqXhr, textStatus, errorThrown ){
console.log('fail');
console.log(errorThrown);
}
});
});
});
The error that I am being shows in the console is; SyntaxError: Unexpected end of JSON input
$.ajax({
url: "https://jsonplaceholder.typicode.com/posts",
type: "POST",
data: JSON.stringify({
name: "test",
emailAddress: "test",
address: "test",
}),
contentType: "application/json",
dataType: "json",
success: function (data, textStatus, jQxhr) {
console.log(data);
},
error: function (jqXhr, textStatus, errorThrown) {
console.log("fail");
console.log(errorThrown);
},
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>contentType has to be application/json and you should pass a plain json into the JSON.stringify method into the data attribute. So the code has to be:
$(document).ready(function () {
$("#newEnquiery").submit(function (event) {
event.preventDefault();
$.ajax({
url: 'SERVER-URL-HERE',
type: 'POST',
data: JSON.stringify({ name: $('#name').val(), emailAddress : $('#emailAddress').val(), address : $('#address').val() }),
contentType: 'application/json',
dataType: 'json',
success: function(data, textStatus, jQxhr){
console.log('Sent');
},
error: function( jqXhr, textStatus, errorThrown ){
console.log('fail');
console.log(errorThrown);
}
});
});
});