JsonNetValueProviderFactory does not deserialize JSON from AngularJS post - ajax

I have an asp.net MVC application.
In my global.asax:
ValueProviderFactories.Factories.Add(new JsonNetValueProviderFactory());
if I use jquery ajax
$.ajax({
url: urlPostInvitation,
type: 'POST',
dataType: 'json',
data: $.toJSON($scope.invitation),
contentType: 'application/json; charset=utf-8',
success: function (data) {
alert('Yes');
}
});
Everything works fine, but if I use AngularJS ajax
$http({
url: urlPostInvitation,
method: "POST",
data: $scope.invitation,
headers: { 'Content-Type': 'application/json; charset=utf-8' }
}).success(function (data, status, headers, config) {
alert("Yes");
});
I get an empty object in the server.
With JsonValueProviderFactory everything works fine, but not with JsonNetValueProviderFactory

If you output $scope.invitation and $.toJSON($scope.invitation) to the console do they look the same?

I answer myself, the jQuery ajax post adds the header: 'X-Requested-With': 'XMLHttpRequest'
If I add this in the AngularJs call it works

Related

ASP.NET Core FromBody is null on AJAX POST but populates in Postman

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
})
}

403 error on Ajax Post Laravel shared hosting

Site works completely OK on other hosting. That is also shared. But doesn't work on current hosting when an Ajax post request is made. The server(not app) responds with 403.
What should I do now? I used postman and it works okay. No problem in url also.
Update:
the code for ajax request:
$.ajax({
type: "POST",
url: window.location.href.split('?')[0],
data: data,
success: function(data){
window.location = data.redirect_to;
},
error: function(data){
},
dataType: 'json'
});
The problem was "not setting" content-type in headers.
I changed the code into:
$.ajax({
type: "POST",
url: window.location.href.split('?')[0],
data: JSON.stringify(data),
success: function(data){
window.location = data.redirect_to;
},
error: function(data){
},
dataType: 'json',
headers: {
'Content-Type':'application/json'
}
});
And it worked.

400 using Axios to make a post request to Django Rest Framework

I'm working with learning some javascript to make a post to a little rest API I created with django rest. I have a post that works when I was working with jQuery but now I am reimplementing using Vue.js and am hitting a snag. When I do the below post request I get a 400 error and am not sure what I am missing. I would imagine something with my header is incorrect? Any advice would be welcome.
axios({
method: 'post',
url: '/api/matches/',
data: JSON.stringify(data),
headers: {
"X-CSRFToken": csrfToken,
"Content-Type": "application/json"
}
})
jQuery post for reference:
$.ajax({
type: "POST",
url: "/api/matches/",
data: JSON.stringify(final_data),
success: function() {},
error: function(err) {console.log(err)},
contentType: "application/json; charset=utf-8",
dataType: "json",
crossDomain:false,
beforeSend: function(xhr, settings) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
});

Jasmine real AJAX request test

I need to make a test with a real ajax request with jasmine,
So far I have this:
function login(){
$.ajax({
method: 'GET',
url: url,
dataType: "json",
contentType: "application/json; charset=utf-8"
});
}
I need to get the login success response, but for that, jasmine needs to wait for the request to end before iteration trough the 'its'.
How can I do that?
You need to use "done()" and then call it once your async request has been completed. It is a part of the jasmine testing suite. So something like this.
function(done){
$.ajax({
method: 'GET',
url: url,
dataType: "json",
contentType: "application/json; charset=utf-8"
});
done();
}
Shouldn't it be more like
function(done){
$.ajax({
method: 'GET',
url: url,
dataType: "json",
contentType: "application/json; charset=utf-8"
})
.then(done);
}
or replace done with a method that actually checks
.then(function(response){
//do your asserts here
done();
});

Alternative method to ajax json

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
}
});

Resources