JQuery 又谈ajax局部刷新


Posted in jQuery onNovember 27, 2017

JQuery 再谈ajax局部刷新。

案例:

JQuery 又谈ajax局部刷新
JQuery 又谈ajax局部刷新
JQuery 又谈ajax局部刷新
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}" rel="external nofollow" 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方法。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
jQuery滑动效果实现方法分析
Sep 05 jQuery
jQuery pjax 应用简单示例
Sep 20 jQuery
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
jquery检测上传文件大小示例
Apr 26 jQuery
深入分析jQuery.one() 函数
Jun 03 jQuery
jQuery Datatables表头不对齐的解决办法
Nov 27 #jQuery
javaScript和jQuery自动加载简单代码实现方法
Nov 24 #jQuery
jquery实现回车键触发事件(实例讲解)
Nov 21 #jQuery
jQuery实现所有验证通过方可提交的表单验证
Nov 21 #jQuery
jquery-file-upload 文件上传带进度条效果
Nov 21 #jQuery
jquery ajaxfileupload异步上传插件
Nov 21 #jQuery
jquery中有哪些api jQuery主要API
Nov 20 #jQuery
You might like
php基础知识:函数基础知识
2006/12/13 PHP
PHP简单判断字符串是否包含另一个字符串的方法
2016/03/25 PHP
PHP简单实现上一页下一页功能示例
2016/09/14 PHP
javascript的键盘控制事件说明
2008/04/15 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
2014/04/15 Javascript
ExtJS4如何给同一个formpanel不同的url
2014/05/02 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
2016/04/17 Javascript
浅谈js数组和splice的用法
2016/12/04 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
2017/07/12 Javascript
jquery实现楼层滚动效果
2018/01/01 jQuery
对vue中v-if的常见使用方法详解
2018/09/28 Javascript
jQuery实现高级检索功能
2019/05/28 jQuery
JS Thunk 函数的含义和用法实例总结
2020/04/08 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
2020/05/06 Javascript
Vue自定义render统一项目组弹框功能
2020/06/07 Javascript
Javascript数组及类数组相关原理详解
2020/10/29 Javascript
[22:20]初生之犊-TI4第5名LGD战队纪录片
2014/08/13 DOTA
[33:15]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VP VS Mineski
2018/03/31 DOTA
[41:12]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
Python探索之Metaclass初步了解
2017/10/28 Python
PHP实现发送和接收JSON请求
2018/06/07 Python
python pandas.DataFrame选取、修改数据最好用.loc,.iloc,.ix实现
2018/06/11 Python
详解Python if-elif-else知识点
2018/06/11 Python
机器学习之KNN算法原理及Python实现方法详解
2018/07/09 Python
Python调用.NET库的方法步骤
2019/12/27 Python
Python pip install之SSL异常处理操作
2020/09/03 Python
金牌葡萄酒俱乐部:Gold Medal Wine Club
2017/11/02 全球购物
北京RT科技有限公司.net工程师面试题
2013/02/15 面试题
酒店服务实习自我鉴定
2013/09/22 职场文书
石油工程专业毕业生求职信
2014/04/13 职场文书
个人安全生产承诺书
2014/05/22 职场文书
承诺书格式范文
2014/06/03 职场文书
放假通知范文
2015/04/14 职场文书
党员带头倡议书
2015/04/29 职场文书
我的生日感言
2015/08/03 职场文书
maven 解包依赖项中的文件的解决方法
2022/07/15 Java/Android