jQuery ajax POST, error 'SyntaxError: Unexpected end of JSON input' - json

I'm sure I'm 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 () {
$("#newEnquiry").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 () {
$("#newEnquiry").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);
}
});
});
});

Related

How to receive json data from html

I want to send some Json data from html to my c# controller. I need it because i want to generate PDF file from this data. I can't find any solution to this problem. Here is how my posting looks:
function sendJSONData() {
var stringToSend = generatePdf();
try {
$.ajax({
type: "POST",
cache: false,
data: stringToSend,
dataType: "json",
success: getSuccess,
error: getFail
});
} catch (e) {
alert(e);
};
function getSuccess(data, textStatus, jqXHR) {
alert(data.Response);
};
function getFail(jqXHR, textStatus, errorThrown) {
alert(jqXHR.status);
};
}
Code snippet from some of my projects, use as an orientation:
<script type="text/javascript">
$(function () {
$("#button").click(function () {
var json = #Html.Raw(Json.Encode(object));
$.ajax({
url: '#Url.Action("Action", "Controller")',
type: 'POST',
dataType: 'json',
data: JSON.stringify(json),
contentType: 'application/json; charset=utf-8',
success: function (result) {
$('.cartbadge').html(result.data);
for (i = 0; i < 2; i++) {
$('.cartbadge')
.animate({ marginTop: '-=' + '10px' }, 100)
.animate({ marginTop: '+=' + '10px' }, 100);
}
setTimeout(function () {
$('.default-navbar').load('/Home/ReturnPartialNavbar');
$('#cartModalHolder').load('/Home/ReturnPartialCartModal');
}, 400);
},
error: function (result) {
alert(result);
}
});
});
});
</script>
You are not specifying an url to your controller. How should your script know where to send your data? ;)

Pass Date from View to Controller with JSON

I am trying to pass the date by ajax to controller as below:
$.ajax({
type: "POST",
contentType: 'application/json',
url: '/UserReport/GenerateReport',
data: JSON.stringify({
'clientId': $('#reportClientDropdown').val(),
'dateFrom': $('#datePickerFrom').val(),
'dateTo': $('#datePickerTo').val()
}),
success: function (succ) {
//
},
error: function (data) {
}
});
dateFrom and dateTo are in format dd/mm/yyyy.
I am getting 500 error after this call. Here is my controller
public JsonResult GenerateReport(int userId, int clientId, DateTime dateFrom, DateTime dateTo)
Is there a problem with DateTime parameter?
specify ajax request datatype jQuery.ajax()
$.ajax({
url: '/UserReport/GenerateReport',
type: "POST",
cache: false,
dataType: 'json',
contentType: "application/json; charset=utf-8",
data: JSON.stringify({
'userId': 1,
'clientId': $('#reportClientDropdown').val(),
'dateFrom': $('#datePickerFrom').val(),
'dateTo': $('#datePickerTo').val()
}),
success: function (result) {
console.log(result);
},
error: function (xhr) {
alert('Error: ' + xhr.statusText);
}
});

Error processing request stream. JSON text specified is not valid

I used this code
function updateListItem(itemId, listName, siteUrl, title, success, failure) {
var metatdata = "{ '__metadata': { 'type': 'SP.Data.TestListListItem' }, 'Title': "+title+"}"
getListItemWithId(itemId, listName, siteUrl, function (data) {
$.ajax({
url: data.__metadata.uri,
dataType: "json",
contentType: "application/json;odata=verbose",
method: "POST",
body: metatdata,
headers: {
"Accept": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"Content-Length":metatdata.length,
"X-HTTP-Method": "MERGE",
"If-Match": "*"
},
success: function (data) {
alert("success in ajax");
console.log("Item in success ajax");
console.log(data);
success(data);
},
error: function (data) {
alert("waiting for success in ajax");
console.log("Item in error ajax");
console.log(data);
failure(data);
}
});
}, function (data) {
failure(data);
});
when i checked it using console,it shows "Error processing request stream. JSON text specified is not valid",I think i can't able to read text value from JSON Response and I tried lot.Please help me guys..Thanks in Advance
function updateListItem(itemId, listName, siteUrl, title, success, failure) {
getListItemWithId(itemId, listName, siteUrl, function (data) {
var item = { '__metadata': { 'type': 'Microsoft.SharePoint.DataService.TestListItem' }, 'Title': title };
$.ajax({
url: data.__metadata.uri,
type: "POST",
contentType: "application/json;odata=verbose",
data: JSON.stringify(item),
headers: {
"Accept": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"X-HTTP-Method": "MERGE",
"If-Match": data.__metadata.etag
},
success: function (data) {
success(data);
},
error: function (data) {
failure(data);
}
});
}, function(data){
failure(data);
});
}
function getListItemWithId(itemId, listName, webUrl, success, failure) {
$.ajax({
url: webUrl + "/_vti_bin/listdata.svc/" + listName + "(" + itemId + ")",
method: "GET",
headers: { "Accept": "application/json; odata=verbose" },
success: function (data) {
success(data.d);
},
error: function (data) {
failure(data.responseJSON.error);
}
});
}

JSON output showing additional tag <?xml version="1.0" encoding="utf-8"?> how to remove

JSON output showing additional tag <?xml version="1.0" encoding="utf-8"?> how to remove because it is working with IE but not with any other browser.
$.ajax({
type: "GET",
url: "http://xxx.xxx.xxx.xx/zzz/abc.asmx/method",
data: {},
xhrFields: {
withCredentials: true
},
crossDomain: true,
dataType: "jsonp",
jsonp: "jsoncallback",
jsonpCallback: "SMS",
cache: true,
success: function (msg) {
var c = eval(msg.d);
for (var i in c) {
treminalId = c[i]['DDD'];
console.log(DDD);
}
},
error: function (msg) {
alert(JSON.stringify(msg));
}
});
try this one
$.ajax({
type: "GET",
url: "http://xxx.xxx.xxx.xx/zzz/abc.asmx/method",
data: formToJSON(),
xhrFields: {
withCredentials: true
},
crossDomain: true,
dataType: "jsonp",
jsonp: "jsoncallback",
jsonpCallback: "SMS",
cache: true,
success: function(msg) {
var c = eval(msg.d);
for (var i in c) {
treminalId = c[i]['DDD'];
console.log(DDD);
}
},
error: function(msg) {
alert(msg);
}
});
function formToJSON() {
return JSON.stringify({});
}

how connect with web service

I am trying to get some data from a web service:
$.ajax({
type: 'POST',
url: "http://192.******.asmx?op=GetJSONString",
method: "serverCallback",
data: "Select con.cod as codigo, con.res as descripcion from con where ide>0",
success: function(data){alert(data)},
});
How can I get the returned JSON data?
Here is what my calls look like. Can you be more specific of the issue you are having?
$.ajax({
type: "POST",
data: "SOME DATA",
dataType: "json",
url : "/myapp/service.json",
cache: false,
error: function() {
alert("There was an issue");
}
,
success: function(data)
{
processJson(data);
}
});
I will also post what has worked with me for asmx services.
In the example below, for "url": "/service/Details.asmx/Reject", the "/Reject" is the method name in the web service (asmx) file.
$.ajax({
"dataType": 'json',
"contentType": "application/json; charset=utf-8",
"type": "POST",
"url": "/service/Details.asmx/Reject",
"data": "{\"itemId\":\"" + id + "\",\"comment\":\"" + comms + "\"}",
"success":
function (msg) {
alert("Yea it worked!");
});
}
});