如何在Ajax中做异常处理
这篇文章的目的是演示我们如何处理jQuery AJAX请求中的异常。需要对HTML、CSS和jQuery有一个基本的了解。这可以通过AJAX fail()方法来完成。我们讨论了3种AJAX方法,以便更好地理解当从我们的网络浏览器向特定的服务器发出任何ajax()请求时发生了什么。
AJAX:AJAX是 “Asynchronous JavaScript and XML “的首字母缩写。Ajax组件利用JavaScript的这种能力来发送异步HTTP请求,接收XML响应(以及其他格式),并更新网站的一部分(使用JavaScript),而无需重新加载或刷新整个网站。
我们需要知道的进行AJAX请求的三种方法如下。
当一个HTTP请求成功时,这个方法被调用。
$.ajax(options).done(callback)
当一个HTTP请求失败时,这个方法被调用。
$.ajax(options).fail(callback)
无论HTTP请求是失败还是成功,这个方法都会被调用。
$.ajax(options).always(callback)
例子:我们将看到如何使用AJAX fail()方法来处理HTTP请求中的错误。fail()回调需要3个参数,第一个参数是一个JSON错误对象,第二个参数是以文本格式给出的原因,最后一个参数是HTTP请求抛出的错误。带有不同参数值的整个对象被显示在文本区。输出以JSON格式显示,以显示HTTP请求失败时作为参数收到的值和类型。
输出的格式如下。
"firstparam": {
value: -> the value of the first parameter
type: -> the type of the first parameter
},
"secondparam": {
value: -> value of second parameter
type: -> the type of the second parameter
},
" thirdparam": {
value: -> value of third parameter
type: -> the type of the third parameter
}
示例:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<style>
.container {
display: flex;
justify-content: center;
}
h1 {
color: green;
}
textarea {
margin-top: 10px;
width: 300px;
height: 300px;
}
</style>
<script type="text/javascript">
(document).ready(function () {
var obj = "";
.ajax("gfg.txt").done(function () {
alert("success");
}).fail(function (errorobj, textstatus, error) {
obj = JSON.stringify({
firstparam: {
value: errorobj,
type: typeof (errorobj)
},
secondparam: {
value: textstatus,
type: typeof (textstatus)
},
thirdparam: {
value: error,
type: typeof (error)
}
}, undefined, 1);
}).always(function () {
$('textarea').val(obj);
});
});
</script>
</head>
<body>
<h1 class="container">
GeeksforGeeks
</h1>
<div class="container">
<textarea></textarea>
</div>
</body>
</html>
输出: