JQuery 再谈ajax局部刷新

简介: 版权声明:欢迎转载,请注明沉默王二原创。 https://blog.csdn.net/qing_gee/article/details/48783129 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方法。


相关文章

笑对现实的无奈,不能后退的时候,不再傍徨的时候,永远向前 路一直都在──陈奕迅《路一直都在》
本文出自:【沉默王二的博客

相关文章
N..
|
6月前
|
XML JSON 前端开发
jQuery实现Ajax
jQuery实现Ajax
N..
64 1
|
6月前
|
XML 前端开发 JavaScript
jQuery中ajax如何使用
jQuery中ajax如何使用
64 0
|
5月前
|
前端开发 JavaScript
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
44 0
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
|
25天前
|
前端开发 JavaScript 数据处理
JQuery 拦截请求 | Ajax 请求拦截
【10月更文挑战第4天】
58 1
|
2月前
|
JSON 前端开发 JavaScript
jQuery AJAX 方法
jQuery AJAX 方法
30 1
|
2月前
|
JSON JavaScript 前端开发
Jquery常用操作汇总,dom操作,ajax请求
本文汇总了jQuery的一些常用操作,包括DOM元素的选择、添加、移除,表单操作,以及如何使用jQuery发送Ajax请求,涵盖了GET、POST请求和文件上传等常见场景。
|
2月前
|
JSON 前端开发 JavaScript
jQuery AJAX 方法
jQuery AJAX 方法
20 1
|
3月前
|
前端开发 JavaScript Java
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
关于如何在SpringBoot项目中结合JQuery和Ajax实现表单数据的传输以及单文件或多文件上传的教程。文章提供了完整的前后端示例代码,包括项目的`pom.xml`依赖配置、SpringBoot的启动类`App.java`、静态资源配置`ResourceConfig.java`、配置文件`application.yml`、前端HTML页面(单文件上传和多文件上传加表单内容)以及后端控制器`UserController.java`。文章最后展示了运行结果的截图。
134 0
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
|
3月前
|
存储 JavaScript 前端开发
关于Django使用Jquery异步刷新
使用Django与jQuery结合实现异步刷新功能,不仅可以提升用户体验,还能提高应用的性能。通过上述的步骤,你可以在自己的Django项目中实现类似的异步数据更新功能。这种技术的关键是理解AJAX的工作原理,以及如何在Django后端创建响应AJAX请求的视图。通过实践这些技巧,你将能够创建更为动态和交互式的Web应用。
31 2
|
3月前
|
XML JSON 前端开发
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
31 0