Maison > interface Web > js tutoriel > Exemple d'actualisation partielle JQuery ajax

Exemple d'actualisation partielle JQuery ajax

小云云
Libérer: 2018-05-14 15:18:45
original
5011 Les gens l'ont consulté

Lors du développement, nous utilisions souvent javascript pour implémenter l'actualisation partielle des pages. Dans cet article, nous partagerons avec vous l'actualisation partielle JQuery ajax, qui a une certaine valeur de référence.

cas :

Exemple dactualisation partielle JQuery ajax
Exemple dactualisation partielle JQuery ajax
Exemple dactualisation partielle JQuery ajax
Exemple dactualisation partielle JQuery ajax

Description :

1. Cliquez sur Connexion et la boîte de dialogue de connexion apparaîtra

2 Si le nom d'utilisateur et le mot de passe sont incorrects, un message d'erreur s'affichera
3. , les informations de connexion seront actualisées. Affichez le nom d'utilisateur et le bouton de sortie
4. Cliquez sur Quitter pour afficher un message d'invite, puis confirmez et actualisez à nouveau le nom d'utilisateur, en revenant à la position de la première image

Alors, quel genre de travail nécessitent ces opérations simples ?


1. Chargez la page de connexion/(nom d'utilisateur-déconnexion)

2 Cliquez sur le lien de connexion pour ouvrir la boîte de dialogue de connexion
3. Lors de la soumission du formulaire de connexion, vérifiez les informations. .
4. Une fois la vérification réussie, fermez la boîte de dialogue et actualisez la page en 1 en même temps pour afficher "Nom d'utilisateur-Sortie"
5 Lorsque vous cliquez pour quitter la balise a, actualisez la page en. 1 à nouveau après vous être déconnecté avec succès et afficher "Connexion"

Chargez la page de connexion/(nom d'utilisateur-déconnexion)

<p id="login_tip" url="${ctx}/mem/initLoginTip"></p>
Copier après la connexion
Donnez à p un identifiant, qui. est utilisé pour l'indexation des pages afin que les éléments suivants puissent être localisés ici.

2. Donnez un attribut url afin qu'il puisse obtenir les informations correspondantes du serveur jfinal lors du chargement de la page. Bien sûr, il s'agit d'obtenir le contenu de la page pour un rafraîchissement partiel.

// 有url的p主动请求服务端获取数据
 $("p[url]", $p).each(function() {
 var $this = $(this);
 var url = $this.attr("url");
 if (url) {
 $this.ajaxUrl({
 type : "POST",
 url : url,
 callback : function() {
 }
 });
 }
 });
Copier après la connexion
Localisez p via l'URL, puis récupérez l'URL et préparez-vous à lancer une requête ajax.

Bien sûr, ne prêtez pas trop attention à la méthode ajaxUrl. Elle sera expliquée plus en détail plus tard.

Cliquez sur le lien de connexion pour ouvrir la boîte de dialogue de connexion

Copiez le code Le code est le suivant :

< ;a title="Connexion " href="${ctx}/mem/initLogin/${sessionScope.username.username}" rel="nofollow externe" target="dialog" width="600">Connexion

1. Ajoutez l'attribut target à l'attribut dialog Bien sûr, si vous n'avez pas suivi cette série de tutoriels, vous pouvez la consulter pour voir comment ouvrir une boîte de dialogue via la balise a et voir comment. pour ouvrir une boîte de dialogue modale.

2. Ajoutez l'attribut width pour définir la largeur de la boîte de dialogue.

Lorsque les informations saisies sont correctes, les informations de connexion seront actualisées et le nom d'utilisateur et le bouton de sortie seront affichés

Copier le code Le le code est le suivant :

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal