I am using an ASP.NET Core 3.0 MVC application in which I make the following jQuery Ajax call:
return $.ajax({
type: type,
url: '/' + controller + '/' + action,
data: jsonData,
timeout: timeout,
contentType: "application/json; charset=utf-8",
success: function (returnedData) {
successFunc(returnedData);
},
error: function (errMsg) {
errorFunc(errMsg);
}
});
passing it the data object
{
input1: 'random',
input2: '1',
input3: '1',
},
But it always passes null arguments through:
I have also tried adding addnewtonsoftjson() in startup but it doesn't seem to change anything.
A similar question here, doesn't really have an answer:
.Net Core 3.0 AJAX POST Body Always Null
I think your problem is kinda relative to the HTTP method/type you are using and the contentType you are passing to the backend.
I've found a great summary of contentType here
If you don't wanna dive too deep into this you could change your contentType into application/x-www-form-urlencoded; charset=UTF-8 should resolve your problem
So keep the c# code as you have shown in your question.
In you js call:
var data = JSON.stringify({
'input1': ‘inputvalue’,
'input2':’inputvalue’,
‘input3’: ‘inputval’
});
$.ajax({
type: "POST",
url: same as you have in the question
data: data,
contentType: 'application/json',
success: function (returnedData) {
successFunc(returnedData);
},
error: function (errMsg) {
errorFunc(errMsg);
}
});
The error seems to com from defining the content type.
return $.ajax({
type: type,
url: '/' + controller + '/' + action,
data: jsonData,
success: function (returnedData) {
successFunc(returnedData);
},
error: function (errMsg) {
errorFunc(errMsg);
}
});
has no contentType defined and passes through to the action in the controller correctly.
Related
This question already has answers here:
How to access the correct `this` inside a callback
(13 answers)
Closed 3 years ago.
I am trying to use 'this' once I get response from Ajax call.
but 'this' seems to be undefined. I found few articles using the 'bind', but I am not sure how to implement the bind.
I don't have any problem using 'this' inside the ajax call. I get response from backend as expected.
saveCart(data: any): void {
let body: any = {}
body.data = data
body = JSON.stringify(body)
// the 'this' works here as expected.
let config = this.config.getHeaders() as any
$.ajax({
url: environment.domain + '/cart',
type: "POST",
headers: config,
data: body,
contentType: "application/json",
dataType: "json",
async: false
}).done(function (response) {
// The 'this' below is undefined **********
this.profileService.logout().subscribe(result => {
console.log('User was logged out', result)
})
})
}
Update: Couple of folks had question about why I am not using httpClient.
This function is called when the user closes the browser. Using angular angular's httpclient is freezing the browser (heavy backend code) for few seconds before it closes. so opted for ajax call.
below is the code I am using everywhere else using angular httpClient
this.http.post(environment.domain + url, body, options)
.pipe(retryWhen(this.config.handleRetry))
.pipe(catchError(this.config.handleError))
Try this one.
saveCart(data: any): void {
/* Other code */
var that = this;
$.ajax({
url: environment.domain + '/cart',
type: "POST",
headers: config,
data: body,
contentType: "application/json",
dataType: "json",
async: false,
success:function(response){
//The 'this' below is undefined **********
that.profileService.logout().subscribe(result => { console.log('User was logged out', result) })
}
})
Try to use this way.
Option 1
Before Ajax call, set a new variable...
var that = this;
Now you can user that instead of this. It will work same as this.
Option 2
You can try with ES6 syntax. I haven't try with Ajax but I used this in my code regularly and it works fine for me.
$.ajax({
url: environment.domain + '/cart',
type: "POST",
headers: config,
data: body,
contentType: "application/json",
dataType: "json",
async: false,
success:(() =>{ <----------------Hear is the change
this...
}) =>{
}
})
I'm trying to perform an AJAX post but I keep getting a null FromBody in my .NET controller. I think it has to do with how I'm formatting my AJAX post.
When I attempt to post with AJAX I get a null FromBody.
var data = {
Date: "2016-12-01",
BurnIdx: 23,
BurnStatIdx1: 3,
BurnStatIdx2: 3,
BurnStatIdx3: 3,
BurnSevIdx: 5,
WorkOrder: 32426,
Comment: "Hi"
};
$('#submit').on('click',function () {
$.ajax({
type: 'POST',
url: 'Home/BurnerMapUpdate',
dataType: 'json',
contentType: 'application/json',
data: data,
success: function (result) {
console.log('Data received');
console.log(result);
}
});
});
However, when I attempt a post in Postman it's successful.
Figured out my problem. Needed to use JSON.stringify on my data.
$('#submit').on('click',function () {
$.ajax({
type: 'POST',
url: 'Home/BurnerMapUpdate',
dataType: 'json',
contentType: 'application/json',
data: JSON.stringify(data),
success: function (result) {
console.log('Data received');
console.log(result);
}
});
Not only the JSON.stringify().
If your data don't match with csharp class data it doesn't receive anything.
Like if you define in the class a field with int type, and send it in the json like "1", it happens to receive the whole data as null
I know you are already figured out of this problem. But I faced with the same just right now. My mistake was I used BODY parameter instead DATA in ajax request.
My Invalid ajax:
function sendRequest(url, method, body, callbackOk, callbackFail) {
$.ajax({
url: url,
body: JSON.stringify(body),
method: method,
contentType: 'application/json; charset=utf-8',
success: callbackOk,
error: callbackFail
})
Valid:
function sendRequest(url, method, body, callbackOk, callbackFail) {
$.ajax({
url: url,
data: JSON.stringify(body),
method: method,
contentType: 'application/json; charset=utf-8',
success: callbackOk,
error: callbackFail
})
}
Iam trying to send multiple parameters with complex datatype to POST method in WebAPI but it fails with 500 server error. I will be greatful if somebody help me finding what is missing ?
Ajax:
var x={}
var y={}
$.ajax({
cache: false,
type: "POST",
data: JSON.stringify({xDto:x,yDto:y}),
url: "/api/Info/PostInfo",
dataType: 'json',
contentType: "application/json;charset=utf-8",
success: function(data) {
}
error: function(data) {
alert(JSON.stringify(data));
}
})
Action:
public IHttpActionResult PostInfo(InfoDto xDto,InfoDto yDto)
{
//post xDto and yDto to db
}
I would change the API Parameter to an InfoDto array and retrieve it from the body:
public IHttpActionResult PostInfo([FromBody]InfoDto[] xDtos)
{
}
You also have to change your JavaScript to something like this:
data: JSON.stringify([x, y])
I develop a web solution for a company and I want to get php variables to my pages using ajax. The problem is that the server of that company is somewhat old and I cannot use json using jason_encode for that. Is there any alternative method to do that without using json? Help would be really appreciated.
formData = {
// all your parameters here
param1: param1,
param2: param2
}
$.ajax({
type: 'POST',
contentType: 'application/json',
url: "https://www.example.com/test",
dataType: "json",
data: formData,
success: function(data) {
//success handling
},
error: function(data) {
//error handling
}
});
This works fine:
jQuery('#my_get_related_keywords').click(function() {
if (jQuery('#my_keyword').val() == '') return false;
jQuery.getJSON("http://boss.yahooapis.com/ysearch/web/v1/"
+jQuery('#my_keyword').val()+"?"
+"appid=myAppID"
+"&lang=en"
+"&format=json"
+"&count=50"
+"&view=keyterms"
+"&callback=?",
function (data) {//do something}
This returns 400 Bad Request (Just a reformulation of the above jQuery using .ajax to support error handling).
jQuery('#my_get_related_keywords').click(function()
{
if (jQuery('#my_keyword').val() == '') return false;
jQuery('#my_loader').show();
jQuery.ajax(
{
url: "http://boss.yahooapis.com/ysearch/web/v1/"
+jQuery('#my_keyword').val()+"?"
+"appid=myAppID"
+"&lang=en"
+"&format=json"
+"&count=50"
+"&view=keyterms"
+"&callback=?",
success: function(data)
{//do something}
I think you just need to add 2 more options (contentType and dataType):
$('#my_get_related_keywords').click(function() {
$.ajax({
type: "POST",
url: "HERE PUT THE PATH OF YOUR SERVICE OR PAGE",
data: '{"HERE YOU CAN PUT DATA TO PASS AT THE SERVICE"}',
contentType: "application/json; charset=utf-8", // this
dataType: "json", // and this
success: function (msg) {
//do something
},
error: function (errormessage) {
//do something else
}
});
}
Add this to your ajax call:
contentType: "application/json; charset=utf-8",
dataType: "json"
Late answer, but I figured it's worth keeping this updated. Expanding on Andrea Turri answer to reflect updated jQuery API and .success/.error deprecated methods.
As of jQuery 1.8.* the preferred way of doing this is to use .done() and .fail(). Jquery Docs
e.g.
$('#my_get_related_keywords').click(function() {
var ajaxRequest = $.ajax({
type: "POST",
url: "HERE PUT THE PATH OF YOUR SERVICE OR PAGE",
data: '{"HERE YOU CAN PUT DATA TO PASS AT THE SERVICE"}',
contentType: "application/json; charset=utf-8",
dataType: "json"});
//When the request successfully finished, execute passed in function
ajaxRequest.done(function(msg){
//do something
});
//When the request failed, execute the passed in function
ajaxRequest.fail(function(jqXHR, status){
//do something else
});
});
Be sure and use 'get' or 'post' consistantly with your $.ajax call for example.
$.ajax({
type: 'get',
must be met with
app.get('/', function(req, res) {
===============
and for post
$.ajax({
type: 'post',
must be met with
app.post('/', function(req, res) {
I was getting the 400 Bad Request error, even after setting:
contentType: "application/json",
dataType: "json"
The issue was with the type of a property passed in the json object, for the data property in the ajax request object.
To figure out the issue, I added an error handler and then logged the error to the console. Console log will clearly show validation errors for the properties if any.
This was my initial code:
var data = {
"TestId": testId,
"PlayerId": parseInt(playerId),
"Result": result
};
var url = document.location.protocol + "//" + document.location.host + "/api/tests"
$.ajax({
url: url,
method: "POST",
contentType: "application/json",
data: JSON.stringify(data), // issue with a property type in the data object
dataType: "json",
error: function (e) {
console.log(e); // logging the error object to console
},
success: function () {
console.log('Success saving test result');
}
});
Now after making the request, I checked the console tab in the browser development tool.
It looked like this:
responseJSON.errors[0] clearly shows a validation error: The JSON value could not be converted to System.String. Path: $.TestId, which means I have to convert TestId to a string in the data object, before making the request.
Changing the data object creation like below fixed the issue for me:
var data = {
"TestId": String(testId), //converting testId to a string
"PlayerId": parseInt(playerId),
"Result": result
};
I assume other possible errors could also be identified by logging and inspecting the error object.
Your AJAX call is not completed with the following two params.
contentType: "application/json; charset=utf-8",
dataType: "json"
contentType is the type of data you're sending
dataType is what you're expecting back from the server
In addition try to use JSON.stringify() method. It is used to turn a javascript object into json string.