Beispiel für eine teilweise JQuery-Ajax-Aktualisierung

Bei der Entwicklung haben wir häufig Javascript verwendet, um eine teilweise Seitenaktualisierung zu implementieren. In diesem Artikel werden wir Ihnen JQuery-Ajax-Teilaktualisierung mitteilen, die einen bestimmten Referenzwert hat.

Gehäuse:

Beschreibung:

1. Klicken Sie auf „Anmelden“ und das Anmeldedialogfeld wird angezeigt.
2. Wenn der Benutzername und das Passwort falsch sind, wird eine Fehlermeldung angezeigt.
3 , die Anmeldeinformationen werden aktualisiert. Zeigen Sie den Benutzernamen und die Schaltfläche „Beenden“ an
4. Klicken Sie auf „Beenden“, um eine Eingabeaufforderung anzuzeigen. Bestätigen Sie dann den Benutzernamen, aktualisieren Sie ihn erneut und kehren Sie zur Position des ersten Bildes zurück

Welche Art von Arbeit erfordern diese einfachen Vorgänge?

1. Laden Sie die Anmelde-/(Benutzername-Abmelde-)Seite
2. Klicken Sie auf den Anmeldelink, um das Anmeldedialogfeld zu öffnen. Überprüfen Sie beim Absenden des Anmeldeformulars die Informationen .
4. Nachdem die Überprüfung bestanden wurde, schließen Sie das Dialogfeld und aktualisieren Sie gleichzeitig die Seite, um „Benutzername-Beenden“ anzuzeigen.
5 Wenn Sie auf klicken, um das Tag zu verlassen, aktualisieren Sie die Seite 1 nach erfolgreicher Abmeldung erneut und „Anmelden“ anzeigen

Login-/(Benutzername-Abmelden)-Seite laden

<p id="login_tip" url="${ctx}/mem/initLoginTip"></p>

1 Geben Sie p eine ID ein wird zur Seitenindizierung verwendet, damit Folgendes hier gefunden werden kann.

2. Geben Sie ein URL-Attribut an, damit beim Laden der Seite die entsprechenden Informationen vom jfinal-Server abgerufen werden können. Dies dient natürlich dazu, den Seiteninhalt für eine teilweise Aktualisierung abzurufen.

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

Suchen Sie p über die URL, rufen Sie dann die URL ab und bereiten Sie sich darauf vor, eine Ajax-Anfrage zu initiieren.

Schenken Sie der ajaxUrl-Methode natürlich nicht zu viel Aufmerksamkeit. Dies wird später näher erläutert.

Klicken Sie auf den Anmeldelink, um das Anmeldedialogfeld zu öffnen

Kopieren Sie den Code Der Code lautet wie folgt:

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

1. Fügen Sie das Attribut target zum Dialogattribut hinzu. Wenn Sie diese Tutorialreihe nicht befolgt haben, können Sie selbstverständlich nachlesen, wie Sie ein Dialogfeld über das Tag a öffnen um ein modales Dialogfeld zu öffnen.

2. Fügen Sie das width-Attribut hinzu, um die Breite des Dialogfelds festzulegen.

Wenn die eingegebenen Informationen korrekt sind, werden die Anmeldeinformationen aktualisiert und der Benutzername und die Schaltfläche zum Beenden werden angezeigt

Code kopieren Die Der Code lautet wie folgt:

1. Die Attribute dieses Formulars sind sehr kritisch. Zwei Parameter „callbackType=closeCurrent“ und „rel=login_tip“ werden der Aktion hinzugefügt. Der callbackType gibt an, dass das Dialogfeld sein soll nach erfolgreicher Anmeldung geschlossen, und rel gibt an, dass das Dialogfeld nach erfolgreicher Anmeldung geschlossen werden soll. Aktualisiertes lokales Objekt.

2. Für „validateCallback“ können Sie sich auf den eigentlichen Login-Sprung von jfinal und Bootstrap beziehen, der eine detaillierte Einführung enthält.
3. Dann müssen Sie sich für dialogAjaxDone auf Folgendes konzentrieren, bitte sehen Sie sich den folgenden Inhalt an.

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. Schauen Sie sich hier die Codezeichenfolge in „if (json.rel) {“ an, wobei json.rel verwendet wird, um die Serienparameter für das a-Tag zu erhalten, und dann die Die ajaxUrl-Methode wird erneut aufgerufen und für eine teilweise Aktualisierung verwendet.

An dieser Stelle müssen wir über die AjaxUrl-Methode sprechen

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

 });

Initiieren Sie eine Anfrage an das jfinal-Ende über eine Ajax-Anfrage und erhalten Sie dann die entsprechende Antwort entsprechend der Antwort Status, wir werden Der Rendering-Inhalt der Seite wird im lokalen p angezeigt.

Die jfinal-Seite ist sehr einfach

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

Das Rendern auf der entsprechenden Komponentenseite ist in Ordnung.

Apropos, die teilweise Aktualisierung des Logins ist abgeschlossen, sofern Sie auf die entsprechende Methode achten.

Wenn Sie auf das Tag a klicken, um es zu verlassen, aktualisieren Sie die Seite 1 erneut, nachdem Sie sich erfolgreich abgemeldet haben, und es wird „Anmelden“ angezeigt.

Zum Beenden können Sie natürlich weiterhin auf das verweisen tatsächliche Abmeldung von jfinal und Bootstrap.

Für die ajaxDone-Methode können Sie sich auf die dialogAjaxDone-Methode beziehen.

thinkphp+ajax partielle Aktualisierung wie

Javascript - Ajax teilweise Aktualisierung

PHP-Seite teilweise Aktualisierungsfunktion Implementierung Methode

Das obige ist der detaillierte Inhalt vonBeispiel für eine teilweise JQuery-Ajax-Aktualisierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!