I'm trying to get an ajax response from a facial recogntionAPI. The response is the data feature of a face, the error message is
{"Errors":[{"Message":"no faces found in the image","ErrCode":5002}]}
The response message is
{"images":[{"status":"Complete","width":236,}]}]}
How should I write the If/else statement so that I can alert "success" if there's a face/response, and alert "fail" if there isn't face/error?
$("#testDetect").click(function () {
var file = $('#imageFile')[0].files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = function () {
var imageData = parseImageData(reader.result);
var data = {};
data.image = imageData;
$.ajax({
url : "http://localhost/Karios/simple-detect/form-post.php",
type : "POST",
data : data,
dataType : 'text'
}).done(function(response) {
console.log(response);
if (!response) {
alert('Hmm, unexpected response from Kairos');
} else if (response['Errors'] && response['Errors'].size() > 0) {
if (response['Errors'][0]['ErrCode'] == 5002) {
alert(response['Errors'][0]['Message']);
} else {
alert('Some other error occurred:\n' + response['Errors']['ErrorCode'] + ': ' + response['Errors']['Message']);
}
} else {
alert('Face(s) detected');
}
})
}
});I'm trying to get an ajax response from a facial recogntionAPI. The response is the data feature of a face, the error message is
{"Errors":[{"Message":"no faces found in the image","ErrCode":5002}]}
The response message is
{"images":[{"status":"Complete","width":236,}]}]}
How should I write the If/else statement so that I can alert "success" if there's a face/response, and alert "fail" if there isn't face/error?
$("#testDetect").click(function () {
var file = $('#imageFile')[0].files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = function () {
var imageData = parseImageData(reader.result);
var data = {};
data.image = imageData;
$.ajax({
url : "http://localhost/Karios/simple-detect/form-post.php",
type : "POST",
data : data,
dataType : 'text'
}).done(function(response) {
console.log(response);
if (!response) {
alert('Hmm, unexpected response from Kairos');
} else if (response['Errors'] && response['Errors'].size() > 0) {
if (response['Errors'][0]['ErrCode'] == 5002) {
alert(response['Errors'][0]['Message']);
} else {
alert('Some other error occurred:\n' + response['Errors']['ErrorCode'] + ': ' + response['Errors']['Message']);
}
} else {
alert('Face(s) detected');
}
})
}
});if there is a face and alert "fail" if there isn't a face
Share Improve this question edited May 17, 2017 at 6:58 Jimmy Liao asked May 17, 2017 at 4:18 Jimmy LiaoJimmy Liao 713 silver badges9 bronze badges 5- and what response you are getting when there is no error – Ujjwal Kumar Gupta Commented May 17, 2017 at 4:23
-
the object you are passing to ajax call, you can pass two more field
errorandsuccess, these both are callbacks. when there is any error the error callback will be called else the success callback. this way you know exactly where the to handle error. – nurulnabi Commented May 17, 2017 at 4:47 - @UjjwalKumarGupta If they send me the response, I want to alert "success". If they send me the error, I want to alert "fail". – Jimmy Liao Commented May 17, 2017 at 5:05
- @nurulnabi Thanks for replying! Since I'm new to programming, I have no idea what you talking about... Could you please write the code out for me? thanks! – Jimmy Liao Commented May 17, 2017 at 5:07
- @JimmyLiao, have a look on my answer. – nurulnabi Commented May 17, 2017 at 5:18
5 Answers
Reset to default 2actually jquery gives a .done and .fail for each, so :
$.ajax({
url : "http://localhost/Karios/simple-detect/form-post.php",
type : "POST",
data : data,
dataType : 'text'
}).done(function(response) {
try {
let jsonResponse = JSON.parse(response);
if(jsonResponse.Errors && jsonResponse.Errors[0] && jsonResponse.Errors[0].ErrCode ===5002) {alert(jsonResponse.Errors[0].Message);}
} catch(err) { console.log("bad response");}
alert( "success" );
})
.fail(function() {
alert( "error" );
})
.always(function() {
alert( "plete" );
});
$("#testDetect").click(function () {
var file = $('#imageFile')[0].files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = function () {
var imageData = parseImageData(reader.result);
var data = {};
data.image = imageData;
$.ajax({
url : "http://localhost/Karios/simple-detect/form-post.php",
type : "POST",
data : data,
dataType : 'text',
success:function(response){
alert('success'); //do your stuff here on success
},
error:function(xhr, textStatus, errorThrown){
alert('fail'); //do your stuff here on fail
}
})
}
})
Have a look on the error and success callback. when the ajax request resolves successfully the success callback will be called indicating the request is successful and the result will be contained in the response else the error callback will be called.
I will suppose the Errors key is only present when there is not a match.
{"Errors":[{"Message":"no faces found in the image","ErrCode":5002}]}
One way is:
if(response.Errors){
alert("fail!"); // or you can return the error message
}else{
alert("success");
}
If the response always contains an Errors key then:
if(response.Errors.length > 0){
// fail
} else {
//success
}
$.ajax({
url : "http://localhost/Karios/simple-detect/form-post.php",
type : "POST",
data : data,
dataType : 'text'
}).done(function(response) {
if(response.Errors)
{
alert("fail!");
console.log(response.Errors.Message)
}
else{
alert('success!');
}
console.log(response)
})
Use handlers for AJAX Events instead of response parsing. It is possible using Global Ajax Event Handlers registration.
For example, remove the .done() method and append the code below to your javascript:
$(document).ajaxSuccess(function() {
alert("AJAX request is success!");
});
$(document).ajaxError(function() {
alert("AJAX request pletes with an error.");
});
Or handle local events:
$.ajax({
// ...
success: function(){
alert("AJAX request is success!");
},
error: function(){
alert("AJAX request pletes with an error.");
}
});