I am facing issue with form submit request sometimes and it getting aborted with 204 status code.
Please find the below code.
var f = document.forms[0];
try {
f.Guid.Value = "xx";
f.action = "Handler1.ashx";
f.submit();
} catch (e) {
SetError(e, null, "General");
}
return false;
Related
I'm currently building a single page application based on Laravel and VueJS.
Is there any better way then mine to handle errors with axios?
This is how I currently do it when a user clicks on login button:
VueTemplae:
methods : {
authenticateUser() {
axios.post('/api/login', this.form).then(() => {
this.$router.push({name : 'home'});
}).catch((error) => {
this.error = error.response.data.message;
});
}
}
Api route:
public function login() {
try {
// do validation
} catch(Exception) {
// validation failed
throw new Exception('login.failed');
}
// manually authentication
if(Auth::attempt(request()->only('email', 'password'))) {
return response()->json(Auth::user(), 200);
}
// something else went wrong
throw new Exception('login.failed');
}
Unfortunately, throwing an exception always prints an internal server error into the console.
If I return something else than an exception, axios always executes then().
Is there any way to prevent this or a better way to handle axios responses?
Thank you!
Your API needs to return a response with a 4XX status code in order for the catch block to fire in your Vue component.
Example:
After you catch the error on the API side, send a response with status code 400 Bad Request. It will be formatted similarly to your successful login response, but with an error message and 400 status code instead of 200.
I am attempting ajax call on change of a value in .jsp which is as follows:-
$(".custodianautocomplete").change(function() {
$('#custodianIDSelected').html($(this).val());
var IDSelected = $(this).val();
if (window.XMLHttpRequest) {
xRequest1 = new XMLHttpRequest();
} else {
xRequest1 = new ActiveXObject("Microsoft.XMLHTTP");
}
xRequest1.onreadystatechange = function() {
if ((xRequest1.readyState == 4) && (xRequest1.status == 200)) {
$(this).parent("td").next().find("input[name=hall_location]").val(xRequest1.responseText);
}
}
xRequest1.open("get", "/chbs/adm/getEmpName.jsp?q=" + IDSelected, "true");
xRequest1.send();
});
The execution of the webpage does not even reach getEmpName.jsp and an error as follows is shown in console
updateHallNames.jsp:254 GET http://localhost:8080/chbs/adm/getEmpName.jsp?q=ISRO008 500 (Internal Server Error)
(anonymous) # updateHallNames.jsp:254
dispatch # jquery-3.2.1.min.js:1627
q.handle # jquery-3.2.1.min.js:1589
The line No 254 shown in updateHallNames.jsp:254 is pointing at xRequest1.send();
I am unable to figure out the reason for the error.
I have resolved the error. The problem was with the error in the code of getEmpName.jsp. I found the details of the error by using standard ajax functionality with .fail(). The amended code is available at the link
here
I have been trying to alert this so that it prints two responses
when there is an error or a duplicate entry and
when the response is ok and prints successfully
var response;
try {
response = JSON.parse(xmlhttp.responseText);
} catch (e) {
console.error(this.responseText);
alert(this.responseText);
}
if (response) {
console.log(response);
}
I want it to alert a response both when there is a failure and when the response is successful, but I haven't figured it out yet.
figured it out
at this stage
console.error(this.responseText);
alert(this.responseText);
i needed to insert my error message here like this
var responseText = this.responseText;
alert('Registration failure because ' + responseText );
and below
console.log(response);
alert ('Registration Successful');
At this stage it prints the required outcome.
I have a view that receives a form submit request via ajax. Sometimes it returns bad request based on certain criteria or in case an exception is raised. Now, sending back simple HttpResponse(status=400) is plain simple. Can I send a reason along with it a reason that I can access using xhr.responseText?
If I understand you right, you can return 400 with some context:
context = {
'reason': 'your reason'
}
response = render(request, '400.html', context)
response.status_code = 400
return response
and for cases with ajax, you just return HttpResponse:
context = {
'status': '400', 'reason': 'you can access this view only via ajax'
}
response = HttpResponse(json.dumps(context), content_type='application/json')
response.status_code = 400
return response
and in your js code:
$.ajax({
// ...
// ...
}).fail(function(data){
var status = data.status;
var reason = data.reason;
});
We're running an external Grails server-application with the Spring Security plugin.
The front-end is running locally on AngularJS.
Whenever I try to login, the request is immediately canceled.. Remarkably AngularJS sends a GET request first with the OPTIONS method; this returns a 200 OK response just fine.
The actual POST request does never reach the server though... what could possibly cancel my request?
The following code:
$scope.login = function() {
$http.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
$scope.loggingIn = true;
// Setup Config
var data = {
j_username: $scope.user.email,
j_password: $scope.user.password
}
var config = {method: 'POST', url: serverUri+'/j_spring_security_check/', data: data};
// Dispatch HTTP Request
$http(config)
.success(function(data, status, headers, config) {
if (data.status) {
// successful login
User.isLogged = true;
User.username = data.username;
}
else {
User.isLogged = false;
User.username = '';
}
$scope.loggingIn = false;
console.log("NOICE!");
})
.error(function(data, status, headers, config) {
$scope.loggingIn = false;
User.isLogged = false;
User.username = '';
if (status == 0) {
// Request got cancelled
console.log("Request got cancelled.");
return;
}
});
}
This is what the canceled request looks like: http://i.stack.imgur.com/kiWnb.png
This is what the OPTIONS request looks like: http://i.stack.imgur.com/FAj96.png
Apparently Chrome does not handle 302 Moved temporarily status codes efficiently when queried by AngularJS in my situation. Firefox properly shows there is a response where Chrome just shows the request as canceled with no response information whatsoever.
This question is solved, but there is still a mystery as to WHY AngularJS does not work. See my question here:
AngularJS $http ajax does not follow Location header