HTTP 500이 아닌 서버 응답을 기반으로 jquery.ajax() 오류 콜백을 트리거하려면 어떻게 해야 합니까?
jquery ajax 기능을 사용하면 다음과 같은 작업을 수행할 수 있습니다.
$.ajax({
url: url,
type: 'GET',
async: true,
dataType: 'json',
data: data,
success: function(data) {
//Handle server response here
},
error: function(xhr, status, error){
//Handle failure here
}
});
위의 코드를 바탕으로 두 가지 질문을 하겠습니다.
jquery.ajax()는 언제 실행됩니까?
error
콜백이 호출됩니까?서버가 "There a error"라는 문자열 메시지로 json 개체를 응답하면 어떻게 됩니까?즉, 요청은 아직 정상적으로 전송되고 있지만 서버로부터 응답을 받았습니다.
{message: "There is an error"}
.
어떤 문자열 값 서버를 담당하든 클라이언트가 서버의 응답을 얻으면 jquery.ajax()가 될 것입니다. success
콜백이 트리거 됩니다.
서버가 다음과 같은 문자열 값을 가진 JSON 개체를 특별히 반환하는지 묻고 싶습니다.{message: 'There is an error'}
서버는 이 응답을 jquery.displaces()로 처리할 수 있도록 어떤 조치를 취할 수 있습니다. error
대신 콜백success
콜백?
에러 콜백은, 서버로부터의 응답이 예상과 다른 경우에 실행됩니다.예를 들어, 이 상황에서는 다음과 같습니다.
- HTTP 404/500 또는 기타 HTTP 오류 메시지가 수신되었습니다.
- 잘못된 유형의 데이터가 수신되었습니다(예: JSON을 예상한 경우, 다른 데이터를 수신한 경우).
사용자의 상황에서는 데이터가 정확합니다(JSON 메시지).수신한 데이터의 값에 근거해 에러 콜백을 수동으로 트리거 하는 경우는, 간단하게 실시할 수 있습니다.오류에 대한 익명 콜백을 명명된 함수로 변경하기만 하면 됩니다.
function handleError(xhr, status, error){
//Handle failure here
}
$.ajax({
url: url,
type: 'GET',
async: true,
dataType: 'json',
data: data,
success: function(data) {
if (whatever) {
handleError(xhr, status, ''); // manually trigger callback
}
//Handle server response here
},
error: handleError
});
서버가 JSON을 송신하고 있을 것으로 상정하고 있습니다.요구가 성공하면 다음과 같은 메시지가 나타납니다.
{
success: true,
data: {
name: 'Foo'
}
}
... 장애 발생 시:
{
success: false,
error: 'Something bad happened.'
}
$.get('http://localhost/api').then(function(res) {
var filter = $.Deferred();
if (res.success) {
filter.resolve(res.data);
} else {
filter.reject(res.error);
}
return filter.promise();
}).done(function(data) {
console.log('Name:', data.name); // Outputs: Foo
}).fail(function(error) {
console.log('Error:', error); // Outputs: Something bad happened.
})
에러 콜백은 Ajax 라운드 트립을 정상적으로 완료할 수 없었던 경우에 대한 것으로, 서버 로직에 근거한 것이 아닙니다.성공 콜백에서 성공적인 응답으로 간주되는 사항을 확인하는 것은 사용자의 책임입니다.메시지 = "There was a error."를 체크하는 단일 IF 조건을 추가하고 오류 논리를 여기에 포함시키고 그렇지 않으면 성공 논리를 수행합니다.
원하는 작업을 수행하는 방법은 오류가 발생했을 때 서버에서 404 헤더를 반환하고 오류 콜백에 의해 처리되는 것입니다.이 접근법의 문제는 실제 오류가 있을 경우 사용자가 숨어서 추가 데이터를 전달할 수 없다는 것입니다.
가장 간단한 방법은 다음과 같이 재구축하는 것입니다.
function handleAjaxError function(xhr, status, error) {
//Handle failure here
}
$.ajax({
url: url,
type: 'GET',
async: true,
dataType: 'json',
data: data,
success: function(data) {
//Handle server response here
if (data.message == 'There is an error')
{
handleAjaxError();
return;
}
//... all is good....
},
error: handleAjaxError
});
콜백에 jQuery always() 함수를 사용하여 수동으로 오류를 작성하려면 Duck Typing을 이용하십시오.
예를 들어 다음과 같습니다.
$.get(url, {"data": data}).always(function(result)
{
if (typeof result.status !== "undefined" && result.status !== 200) // Status code 200 represents Success/OK
{
//handle error
error = "Your error was " + result.status + " " + result.statusText;
}
else
{
//success
}
});
오류 섹션은 404 Not Found와 같은 자연스러운 헤더 오류가 있는 경우 항상 실행됩니다.오류를 수동으로 반환하려면 일반적으로 오류와 함께 전달되는 XHR 개체를 에뮬레이트하면 됩니다(예: PHP).
public function ServerSideAjaxResponse($data)
{
if (!$data)
{
$response["status"] = 1001; //Make up your own error codes! Yippee! Fun!
$response["statusText"] = "Error! You forgot to send the data!";
echo json_encode($return);
return;
}
}
이 최초의 질문은 몇 년 전에 게시된 것이며, 아마도 지금 이 문제를 해결할 더 나은 방법이 있습니다.다음은 OP 질문을 포함한 여러 유형의 오류를 처리하기 위한 제안입니다.
입력 유형(오류) 예 #1
function handleError (type){
type = type || "Connection Issue";
var value = "Error occurred: " + type;
alert(value);
}
function checkIfError(response){
if (response == "DB_ERROR") {
handleError("Server error");
throw new Error("JS died"); // optional, keep from running additional script
}
}
var example = {
success: function (response) {
checkIfError(response); // check data if error msg
// do stuff when proper data sent
alert(response);
}, error: handleError // connection error, call error msg
};
test1 = example['error']();
입력 유형(success: error) 예 #2
function handleError (type){
type = type || "Connection Issue";
var value = "Error occurred: " + type;
alert(value);
}
function checkIfError(response){
if (response == "DB_ERROR") {
handleError("Server error");
throw new Error("JS died"); // optional, keep from running additional script
}
}
var example = {
success: function (response) {
checkIfError(response); // check data if error msg
// do stuff when proper data sent
alert(response);
}, error: handleError // connection error, call error msg
};
test2 = example['success']("DB_ERROR");
입력 유형(성공) 예 #3
function handleError (type){
type = type || "Connection Issue";
var value = "Error occurred: " + type;
alert(value);
}
function checkIfError(response){
if (response == "DB_ERROR") {
handleError("Server error");
throw new Error("JS died"); // optional, keep from running additional script
}
}
var example = {
success: function (response) {
checkIfError(response); // check data if error msg
// do stuff when proper data sent
alert(response);
}, error: handleError // connection error, call error msg
};
test3 = example['success']("Proper Response");
함수를 사용하면 스크립트에 여러 개의 콜이 있는 경우 변경을 단순화할 수 있습니다.
오류를 트리거하기 위해 PHP(또는 서버 측 코드)가 "DB_ERROR"(또는 원하는 것) 응답을 반환하도록 합니다. 오류에 따라 다른 작업을 수행할 수 있습니다.
언급URL : https://stackoverflow.com/questions/6265814/how-to-trigger-jquery-ajax-error-callback-based-on-server-response-not-http-5
'programing' 카테고리의 다른 글
typescript-eslint/parser를 버전 4.0.0으로 업그레이드하기 때문에 eslint가 JSX 또는 일부 react @types가 정의되지 않았다고 간주하는 이유 (0) | 2023.03.10 |
---|---|
Linked Tree Map을 gson Json Object로 변환하는 방법 (0) | 2023.03.10 |
블로그 폴더 외부에 있는 index.php 콘텐츠를 로드하여 한 페이지를 게시합니다. (0) | 2023.03.10 |
WooCommerce 감사 페이지 확인하는 방법 (0) | 2023.03.05 |
SQL의 곱셈 집계 연산자 (0) | 2023.03.05 |