Méthode de référence d'événement globale Ajax et ordre d'exécution de chaque événement (global/local)-js tutoriel-php.cn

Méthode de référence d'événement globale Ajax et ordre d'exécution de chaque événement (global/local)

寻∝梦

Libérer： 2018-09-10 14:42:38

original

1918 Les gens l'ont consulté

Cet article présente principalement la méthode de référence d'événement globale d'ajax et l'ordre d'exécution de chaque événement. Lisons maintenant cet article ensemble

Tous. événements globaux de la méthode ajax de jquery :

ajaxStart : avant le début de la requête ajax

ajaxSend : lorsque la requête ajax est effectuée

ajaxSuccess : ajax après obtenir les données

ajaxComplete : lorsque la requête ajax est terminée

ajaxError : après qu'une erreur se produit dans la requête ajax

ajaxStop : après l'arrêt de la requête ajax

Global de la méthode ajax L'utilisation des événements

Lorsque vous utilisez la méthode ajax de jquery, que ce soit $.ajax(), $.get(), $.load(), $.getJSON( ), etc., les événements globaux seront déclenchés par défaut. Les événements globaux ne sont généralement pas liés, mais en fait ces événements globaux sont très utiles.

L'événement global Ajax a un scénario d'application typique : votre page contient plusieurs, voire un grand nombre de requêtes ajax, mais ces requêtes ajax ont le même mécanisme de message. Une boîte d'invite s'affiche avant le début de la requête ajax, demandant « Lecture des données » ; lorsque la requête ajax est réussie, la boîte d'invite affiche « Acquisition de données réussie » une fois la requête ajax terminée, la boîte d'invite est masquée. La façon de ne pas utiliser d'événements globaux est d'ajouter les fonctions de rappel beforeSend, success et complete à $.ajax(), et d'ajouter une boîte d'invite de traitement dans la fonction de rappel. La façon d'utiliser les événements globaux est la suivante :

$(document).ajaxStart(onStart)
   .ajaxComplete(onComplete)
   .ajaxSuccess(onSuccess);
function onStart(event) {
	//.....
}
function onComplete(event, xhr, settings) {
	//.....
}
function onSuccess(event, xhr, settings) {
	//.....
}

Copier après la connexion

L'ordre d'exécution de chaque événement dans jquery est le suivant

1.ajaxStart (événement global)

2.beforeSend (événement local)

3.ajaxSend (événement mondial)

4.success (événement local)

5.ajaxSuccess (événement mondial)

6 .error (événement local)

7.ajaxError (événement mondial)

8.complete (événement local)

9.ajaxComplete (événement mondial)

10.ajaxStop (Événements mondiaux)

Exemple

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
	</head>

	<body>
		<input type="button" value="点击触发ajax请求" id="ajaxReuqestID" />
		<p id="ajaxStateID"></p>
		<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
		<script type="text/javascript">
			$(function() { //点击按钮，并执行ajax请求
				$(document).ajaxStart(function() {
					$("#ajaxStateID").append("ajaxStart" + "<br/>");
					alert("ajaxStart");
				}).ajaxSend(function() {
					$("#ajaxStateID").append("ajaxSend" + "<br/>");
					alert("ajaxSend");
				}).ajaxSuccess(function() {
					$("#ajaxStateID").append("ajaxSuccess" + "<br/>");
					alert("ajaxSuccess");
				}).ajaxError(function() {
					$("#ajaxStateID").append("ajaxError" + "<br/>");
					alert("ajaxError");
				}).ajaxComplete(function() {
					$("#ajaxStateID").append("ajaxComplete" + "<br/>");
					alert("ajaxComplete");
				}).ajaxStop(function() {
					$("#ajaxStateID").append("ajaxStop" + "<br/>");
					alert("ajaxStop");
				});
				$("#ajaxReuqestID").click(function() {
					$.ajax({
						url: "server/ajaxtxt.txt",
						global: true,
						beforeSend: function() {
							$("#ajaxStateID").append("berforeSend" + "<br/>");
							alert("berforeSend");
						},
						success: function() {
							$("#ajaxStateID").append("success" + "<br/>");
							alert("success");
						},
						error: function() {
							$("#ajaxStateID").append("error" + "<br/>");
							alert("error");
						},
						complete: function() {
							$("#ajaxStateID").append("complete" + "<br/>");
							alert("complete");
						}
					});
				});
			});
		</script>
	</body>

</html>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP