JQuery 再談ajax局部重新整理

版權聲明：歡迎轉載，請注明沉默王二原創。 https://blog.csdn.net/qing_gee/article/details/48783129

JQuery 再談ajax局部重新整理。

案例：

描述：

1. 點選登入則彈出登入對話框

2. 如果使用者名密碼不正确，則提示錯誤資訊

3. 當輸入資訊正确，則重新整理登入資訊，顯示使用者名和退出按鈕

4. 點選退出彈出提示資訊，然後确定後再次重新整理使用者名，回到了第一幅圖檔的位置

那這些簡單的操作，都需要做一些什麼工作呢？

1. 加載登入/（使用者名-退出）的頁面

2. 點選登入連接配接，打開登入對話框

3. 登入form表單送出時，對資訊進行驗證。

4. 驗證通過後，關閉對話框，同時重新整理1中的頁面，顯示“使用者名-退出”

5. 點選退出a标簽時，登出成功後再次重新整理1中的頁面，顯示“登入”

加載登入/（使用者名-退出）的頁面

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

1. 給div一個id，用來做頁面索引，使後面能夠定位到此處。

2. 給一個url屬性，使其在頁面加載的時候向jfinal服務端擷取對應資訊，當然也就是為了局部重新整理擷取頁面内容。

// 有url的div主動請求服務端擷取資料
    $("div[url]", $p).each(function() {
        var $this = $(this);
        var url = $this.attr("url");
        if (url) {
            $this.ajaxUrl({
                type : "POST",
                url : url,
                callback : function() {
                }
            });
        }
    });           

通過url來定位到DIV，然後擷取url，準備發起ajax請求。

當然ajaxUrl方法先不要去關注太多，稍後會進一步解釋。

點選登入連接配接，打開登入對話框

<a title="登入" href="${ctx}/mem/initLogin/${sessionScope.username.username}" target="dialog" width="600">登入</a>           

1. 增加屬性target為dialog屬性，當然如果你還沒有關注本系列教程，那麼你可以回顧一下

來看看怎麼通過a标簽打開一個對話框

，看看如何打開模态對話框。

2. 增加width屬性，設定對話框的寬度。

當輸入資訊正确，則重新整理登入資訊，顯示使用者名和退出按鈕

<form class="pop_login_form" action="${ctx}/mem/login?callbackType=closeCurrent&rel=login_tip" method="post"
    onsubmit="return validateCallback(this, dialogAjaxDone)">           

1. 這個form表單的屬性就很關鍵了，action中增加了兩個參數“callbackType=closeCurrent”、“rel=login_tip”，callbackType指定對話框在登入成功後要關閉，而rel則指定關閉對話框後重新整理的局部對象。

2. validateCallback你可以參照

jfinal與bootstrap的登入跳轉實戰

，裡面有詳細的介紹。

3. 然後對于dialogAjaxDone，就需要重點說明以下，請看以下内容。

function dialogAjaxDone(json) {
    YUNM.ajaxDone(json);
    if (json[YUNM.keys.statusCode] == YUNM.statusCode.ok || json[YUNM.keys.statusCode] == YUNM.statusCode.info) {
        if (json.rel) {// 指定對應的div進行資料加載
            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. 這裡請看“if (json.rel) {”中的這串代碼，該處通過json.rel，擷取a标簽上的系列參數，然後再次調用ajaxUrl方法，用來做局部重新整理。

到了這裡，就不得不說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);
                    }
                }
            });
        },

    });
           

通過ajax請求，向jfinal端發起請求，然後接收對應的response，根據response狀态，我們将對應的頁面渲染内容顯示到局部DIV中。

jfinal端就很簡單了

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

渲染到對應元件頁面就OK了。

說到這，登入的局部重新整理就完成了，隻要你注意到對應的方法就好了。

點選退出a标簽時，登出成功後再次重新整理1中的頁面，顯示“登入”

對于退出，你當然還是可以參照

jfinal與bootstrap的登出實戰

。

對于ajaxDone方法，你可以參照dialogAjaxDone方法。

相關文章

• 極緻ajax局部和整體重新整理

笑對現實的無奈，不能後退的時候，不再傍徨的時候，永遠向前　路一直都在──陳奕迅《路一直都在》

本文出自:【

沉默王二的部落格 】