Exemple d'actualisation partielle JQuery ajax

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 :

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>

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() {
 }
 });
 }
 });

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 :

1. Les attributs de ce formulaire sont très critiques. Deux paramètres "callbackType=closeCurrent" et "rel=login_tip" sont ajoutés à l'action. Le callbackType précise que la boîte de dialogue doit être fermé après une connexion réussie, et rel spécifie que la boîte de dialogue doit être fermée une fois la connexion réussie. Objet local actualisé.

2. Pour validateCallback, vous pouvez vous référer au saut de connexion réel de jfinal et bootstrap, qui a une introduction détaillée.
3. Ensuite, pour dialogAjaxDone, vous devez vous concentrer sur ce qui suit, veuillez consulter le contenu suivant.

function dialogAjaxDone(json) {
 YUNM.ajaxDone(json);
 if (json[YUNM.keys.statusCode] == YUNM.statusCode.ok || json[YUNM.keys.statusCode] == YUNM.statusCode.info) {
 if (json.rel) {// 指定对应的p进行数据加载
 var url = json.forwardUrl, options = {
 elementId : json.rel
 };
 var op = $.extend({
 data : {},
 elementId : "",
 callback : null
 }, options);

 var $panel = $("#" + op.elementId);

 if (!url) {
 url = $panel.attr("url");
 }

 if (url) {
 $panel.ajaxUrl({
 type : "POST",
 url : url,
 data : op.data,
 callback : function(response) {
 if ($.isFunction(op.callback))
 op.callback(response);
 }
 });
 }
 }

 if ("closeCurrent" == json.callbackType) {
 close_pop();
 } else if ("closeCurrentThenForward" == json.callbackType) {
 close_pop();
 if (json.forwardUrl) {
 location.href = common.ctx + json.forwardUrl;
 return;
 }
 }
 }
}

1. Ici, veuillez regarder la chaîne de code dans "if (json.rel) {", où json.rel est utilisé pour obtenir les paramètres de série sur la balise a, puis le La méthode ajaxUrl est appelée à nouveau, utilisée pour une actualisation partielle.

À ce stade, nous devons parler de la méthode ajaxUrl

(function($){
 // DWZ set regional
 $.setRegional = function(key, value){
 if (!$.regional) $.regional = {};
 $.regional[key] = value;
 };

 $.fn.extend({
 initUI: function(){
 return this.each(function(){
 if($.isFunction(initUI)) initUI(this);
 });
 },
 loadUrl: function(url,data,callback){
 $(this).ajaxUrl({url:url, data:data, callback:callback});
 },
 ajaxUrl: function(op){
 var $this = $(this);

 $this.trigger(YUNM.eventType.pageClear);

 $.ajax({
 type: op.type || 'GET',
 url: op.url,
 data: op.data,
 cache: false,
 success: function(response){
 var json = YUNM.jsonEval(response);

 if (json[YUNM.keys.statusCode]==YUNM.statusCode.error){
 if (json[YUNM.keys.message]) $.showErr(json[YUNM.keys.message]);
 } else {
 $this.html(response).initUI();
 if ($.isFunction(op.callback)) op.callback(response);
 }
 },
 error: YUNM.ajaxError,
 statusCode: {
 503: function(xhr, ajaxOptions, thrownError) {
 $.showErr("服务器当前负载过大或者正在维护!" || thrownError);
 }
 }
 });
 },

 });

Initier une requête jusqu'à la fin jfinal via une requête ajax, puis recevoir la réponse correspondante en fonction de la réponse. statut, nous allons Le contenu du rendu de la page est affiché dans le p local.

Le côté jfinal est très simple

public void initLoginTip() {
 logger.info("初始化登录/退出页面");
 render("login_tip.jsp");
 }

Le rendu vers la page du composant correspondant est OK.

En parlant de cela, le rafraîchissement partiel de la connexion est terminé, à condition de faire attention à la méthode correspondante.

Lorsque vous cliquez pour quitter la balise a, actualisez à nouveau la page en 1 après vous être déconnecté avec succès, et elle affichera "Connexion"

Pour quitter, bien sûr, vous pouvez toujours vous référer au déconnexion réelle de jfinal et bootstrap.

Pour la méthode ajaxDone, vous pouvez vous référer à la méthode dialogAjaxDone.

thinkphp+ajax rafraîchissement partiel comme

javascript - rafraîchissement partiel ajax

fonction de rafraîchissement partiel de la page php Implémentation méthode

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!