AJAX request doesn't execute fail on 400 bad query - javascript

I'm sending this request, and it is perfectly fine as long as it's successful. However, if I try to create a user with existing username or email, I should get 400 bad request and response detailing what's the problem.
Thing is, when I send this request and get 400, nothing gets written to console/console (not even the 'fail!' string), but I can see that response is correct in console/network tab so the problem is probably not in the backend.
$("#registerForm").submit(function(e){
e.preventDefault()
$.ajax({
type: "POST",
url: "./register",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: JSON.stringify({
"username": formcontent['username'],
"email": formcontent['email'],
"password": formcontent['password'],
}),
success: function(e) {
window.location.href = './login'
return false
},
fail: function(e) {
console.log('fail!')
console.log(e)
//react to error
return false
},
})
})

I think 'fail' is a invalid function, Please try with below structure
$.ajax({
type : "POST",
url : "/register",
contentType : "application/json; charset=utf-8",
dataType : "json",
data : JSON.stringify({
"username" : formcontent['username'],
"email" : formcontent['email'],
"password" : formcontent['password'],
}),
success : function(response) {
console.log(response);
},
error : function(response, status, err) {
console.log(response);
console.log(status);
console.log(err);
}
});

Related

Doing a validation check on a AJAX post and returning the error message

I have an AJAX post that does this.
$.ajax({
type: "POST",
url: "#MyWebSite.Url/myController/myView",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ myModel: myData }),
dataType: "json",
traditional: true,
success: function () {
alert('Success!');
},
error: function () {
alert('Error! ');
}
})
My controller does the validation check but it is not correctly returning the error message.
This is what my controller looks like:
if (totalQty < part.QtyInItem) {
//ModelState.AddModelError("", "My ERROR Message");
//RedirectToAction("myControler", myModel);
return this.Json(new { success = false, message = "My Error Message" });
}
When I tried adding an error to the model state it just returned "ERROR!" and not the error message I had associated with it. And when I try doing the this.JSON return it returns "success" to the view and not the error message.
How can I do this validation check for my AJAX post
You have to add data object to your function.
$.ajax({
type: "POST",
url: "#MyWebSite.Url/myController/myView",
contentType: "application/json; charset=utf-8",
data:
JSON.stringify({ myModel: myData }),
dataType: "json",
traditional: true,
success: function (data) {
alert(data.message);
},
error: function () {
alert('Error! ');
}
If you are still getting error, you should check your console for any server errors.

How to handle X-CSRF-Token for jQuery POST in UI5?

I want to use jQuery POST method to call an xsjs service that does some modifications in Database.My xsaccess file prevents xsrf, so I need to handle it in my controller method.
Below is my controller code-
var obj= {};
obj.name= "John";
obj.age= "abc#xyz.com";
obj.loc= "Minnesota";
jQuery.ajax({
url: "serviceTest.xsjs",
type: "GET",
data: JSON.stringify(obj),
beforeSend: function(xhr) {
xhr.setRequestHeader("X-CSRF-Token", "Fetch");
},
success: function(responseToken, textStatus, XMLHttpRequest) {
var token = XMLHttpRequest.getResponseHeader('X-CSRF-Token');
console.log("token = " +token);
jQuery.ajax({
url: "serviceTest.xsjs",
type: "POST",
data: JSON.stringify(obj),
beforeSend: function(xhr) {
xhr.setRequestHeader("X-CSRF-Token", token);
},
success : function(response) {
// will be called once the xsjs file sends a
response
console.log(response);
},
error : function(e) {
// will be called in case of any errors:
var errMsg = e.responseText
console.log(e);
}
});
},
And here is my xsjs code-
var csrf_token = $.request.headers.get("X-CSRF-Token");
if(csrf_token === "Fetch") {
var content = $.request.body.asString();
var args = $.parseJSON(content);
var xsName= args.name;
var xsemail= args.email;
var xsLoc= args.loc;
//then execute DML statement by passing these 3 parameters as arguments.
catch (error) {
$.response.setBody(content);
$.response.status = $.net.http.INTERNAL_SERVER_ERROR;
}
I am not able to do the update and getting error Err 500 - Internal server Error.
Any suggestions would be extremely helpful
Edit:
If I forgot the token then I got a 403 Access denied error ("CSRF token validation failed") and not a 500 internal. So I think something is wrong with your services
You can add your X-CSRF-Token as header of your POST request with setup your ajax requests before your fire your POST.
$.ajaxSetup({
headers: {
'X-CSRF-Token': token
}
});
jQuery.ajax({
url: "serviceTest.xsjs",
type: "POST",
data: JSON.stringify(obj),
beforeSend: function(xhr) {
Otherwise add it to each POST request.
jQuery.ajax({
url: "serviceTest.xsjs",
type: "POST",
data: JSON.stringify(obj),
headers: {
'X-CSRF-Token': token
},
beforeSend: function(xhr) {
Your way with using beforeSend event should work too.

JSON ajax post data - get 400 bad request message

First of all. I read many questions about this problem here in stackoverflow but nothing helps me.
I've this function:
function ip_login(){
//alert(JSON.stringify(arr_login));
$.ajax({
crossdomain: true,
url: 'https://****/Token',
type: 'POST',
data: JSON.stringify(arr_login),
contentType: 'application/x-www-form-urlencoded',
dataType: 'json',
success: function (data) {
console.log(data);
}
});
}
And this is my JSON string:
{"grant_type":"password","username":"mail#mail.de","password":"blabla"}
With the google chrome extension 'postman' it works fine!
If I test my code above I got the popular 400 bad request message.
When I take the code of the extension 'postman' it doesn't work too.
This is the code of postman:
var settings = {
"async": true,
"crossDomain": true,
"url": "https://*****/Token",
"method": "POST",
"headers": {
"cache-control": "no-cache",
"content-type": "application/x-www-form-urlencoded"
},
"data": {
"grant_type": "password",
"username": "mail#mail.de",
"password": "blabla"
}
}
$.ajax(settings).done(function (response) {
console.log(response);
});
I can't fine my issue..
I searched on Google and SO but no reply helped me.
Edit:
This is in my console:
"NetworkError: 400 Bad Request - https://awesome-url.de/Token"
The problem is in stringifiing JSON. Server expects json but you send string(stringified JSON). Try
function ip_login(){
//alert(JSON.stringify(arr_login));
$.ajax({
crossdomain: true,
url: 'https://****/Token',
type: 'POST',
data: arr_login,
contentType: 'application/x-www-form-urlencoded',
dataType: 'json',
success: function (data) {
console.log(data);
}
});
}
Not sure if this helps, but try anyways.
When I'm sending Json, I didn't use "JSON.stringify(arr_login)"
All I did was something like "data:{arr_login:arr_login}"
This is how my variable looks like.
var req = new Object();
req["type"] = 'refresh';
req["time"] = window.page_ordertime;
This is how my ajax looks like
$.ajax( {
url:"listorder_process.php",
method: "POST",
dataType:"json",
data:{request:req}
} )

JQuery shortcut for sending ajax/JSON requests

I am working on a application that uses a REST architecture style. Hence, I often do some calls to the backend with JSON data.
jQuery is new to me and up to now, the only syntax that worked for me is :
$.ajax({
url: '/api/something/',
type: 'POST',
contentType:"application/json", //Or I will get 400 : Bad request
data: JSON.stringify({key : "value"}),
success: function (data) {
console.log("data : %o", data);
}
});
But I do not want to write explicitly contentType:"application/json" and JSON.stringify at every call. I would prefer something like :
$.someFunction({
url: '/api/something/',
type: 'POST',
data: {key : "value"},
success: function (data) {
console.log("data : %o", data);
}
});
Maybe I could make a function in order to factorize this but I feel that jQuery should have a pre-existing function for that.
Anyone knows such function?
Just wrap everything in a function and pass the parameters you need.
var thinPostWrapper = function(url, data, success) {
return $.ajax({
url: url
type: 'POST',
contentType: "application/json",
data: JSON.stringify(data),
success: success
});
}
thinPostWrapper('/api/something/', {"key" : "value"}, function(data) {
console.log("data : %o", data);
});
Try extending jQuery:
$.extend({doPost: function(url, data, success, error) {
$.ajax({
url: url,
type: 'POST',
contentType: "application/json",
data: JSON.stringify(data),
success: success,
error: error
});
}
});
$.doPost('/api/something/', {"key" : "value"}, function(data) {
console.log("data : %o", data);
});
Try
$.post(
'api/something',
{ key: 'value' },
function( data ) {
...
},
'json'
);
See http://api.jquery.com/jquery.post/ for more details
Try with $.post
$.ajax({
type: "POST",
url: url,
data: data,
success: success,
dataType: dataType
});

Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin

Hi there are already lots of threads related to this problem.
But still i got stuck into the same . When I am trying to access this REST api, I couldnt able to get the response. I cannot control server side response header because its public API .can any body help on this.
Below is my code
$(document).ready(function() {
$("#medication").autocomplete({
select : function(request, response) {
//$(this).value(response.item.value);
getMedicationIdByName(response.item.value);
},
search : function(){$(this).addClass('working');},
open : function(){$(this).removeClass('working');},
source : function(request, response) {
$.ajax({
headers : {
Accept : "application/json; charset=utf-8",
"Content-Type" : "application/json; charset=utf-8"
},
type : "GET",
url : "http://rxnav.nlm.nih.gov/REST/spellingsuggestions",
data : "name="+ request.term,
crossDomain: 'true',
dataFil ter : function(data) {
return data;
},
success : function(data) {
try {
//alert("success!!"+JSON.stringify(data));
data = data.suggestionGroup.suggestionList["suggestion"]+ "";
data = data.split(",");
response($.map(data,function(item) {
//alert("success!!"+JSON.stringify(item))
return {
value : item
};
}));
} catch (e) {
alert(e);
}
},
error : function() {
alert('Cannot connect to REST API!!!');
}
});
},
minLength : 4
});
});
You need to set dataType to jsonp in your ajax request.
type: "GET",
headers: {
Accept : "application/json; charset=utf-8",
"Content-Type": "application/json; charset=utf-8"
},
url: "http://rxnav.nlm.nih.gov/REST/spellingsuggestions",
data: { name: "bard"},
dataType: "jsonp",
crossdomain: true,

Categories