El propósito de este artículo es demostrar cómo manejamos la excepción en la solicitud jQuery AJAX . Se requiere una comprensión básica de HTML , CSS y jQuery . Esto se puede hacer mediante un método fail() de AJAX. Discutimos 3 métodos AJAX para comprender mejor lo que sucede cuando se realiza una solicitud ajax() desde nuestro navegador web a un servidor en particular.
AJAX : AJAX es un acrónimo de «JavaScript asíncrono y XML». El componente Ajax explota esta capacidad de JavaScript para enviar requests HTTP asíncronas, recibir la respuesta XML (así como otros formatos) y actualizar parte de un sitio web (usando JavaScript) sin recargar o actualizar todo el sitio.
Los tres métodos que necesitamos saber para realizar requests AJAX son los siguientes.
Este método se llama cuando una solicitud HTTP tiene éxito.
$.ajax(options).done(callback)
Este método se llama cuando falla una solicitud HTTP.
$.ajax(options).fail(callback)
Este método se llama siempre, ya sea que la solicitud HTTP falle o tenga éxito.
$.ajax(options).always(callback)
Ejemplo: Vamos a ver cómo usar los métodos fail() de AJAX para manejar el error en las requests HTTP. La devolución de llamada fail() toma 3 parámetros donde el primer parámetro es un objeto de error JSON , el segundo parámetro recibe un motivo en formato de texto y el último parámetro es para el error generado por la solicitud HTTP. El objeto completo con los valores de los diferentes parámetros se muestra en el área de texto. El resultado se muestra en formato JSON para mostrarle el valor y el tipo del valor que se recibe como parámetro cuando falla una solicitud HTTP.
El formato de la salida es el siguiente.
"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
}
Ejemplo:
HTML
<!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>
Producción:
Publicación traducida automáticamente
Artículo escrito por debadebaduttapanda7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA