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}" 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局部和整体刷新
- jfinal与bootstrap的登录跳转实战
- jfinal与bootstrap的登出实战
笑对现实的无奈,不能后退的时候,不再傍徨的时候,永远向前 路一直都在──陈奕迅《路一直都在》
本文出自:【沉默王二的博客】
JQuery 再谈ajax局部刷新相关推荐
- ajax自动局部刷新,jQuery如何实现AJAX定时刷新局部页面
jQuery如何实现AJAX定时刷新局部页面 发布时间:2021-06-25 09:47:48 来源:亿速云 阅读:75 作者:小新 这篇文章主要介绍了jQuery如何实现AJAX定时刷新局部页面,具 ...
- asp ajax局部刷新,ASP.Net用jQuery ajax实现页面局部刷新
刚开始的时候使用asp的updatepanel控件实现局部刷新,而且在本地运行正确,但是部署到服务器上就变成整个页面全部刷新了.服务器用的是Windows server2000,本地机子上用的是win ...
- ajax 刷新output,JSF生命周期及AJAX局部刷新
这些时间可能一直得搞JSF...... 呵呵,这个星期天再一次的仔细的研究了一下这个所谓的6个生命周期的运行情况以及所谓的AJAX局部刷新的问题. 看了core JSF里详细描述的JSF的生命周期,基 ...
- ajax提交成功后局部刷新 jq_JQuery ajax局部刷新实例
在我们开发的时候,我们回时常用到javascript实现页面局部刷新,本文我们就和大家分享JQuery ajax局部刷新,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 案例: 描述: 1. 点击登 ...
- Ajax局部刷新数据:添加、删除
今天用ajax局部刷新的方式,写了个搜索显示出局部数据和点击删除,页面同样局部更新删除数据 异步搜索局部添加 1.盒子显示 2.ajax处理 url请求路径,experiment项目名,UserSer ...
- Ajax局部刷新后,重新加载百度分享
1.问题 在使用ajax请求刷新局部页面后,发现百度分享无法正常使用了.初步估计是因为更新了百度分享的那部分页面但没有重新加载百度分享js导致. 2.重新加载百度分享 按照上面上面的猜测重新加载了百度 ...
- js 只刷新ajax,JS实现AJAX局部刷新(附代码)
这次给大家带来JS实现AJAX局部刷新(附代码),JS实现AJAX局部刷新的注意事项有哪些,下面就是实战案例,一起来看一下. AJAX即"Asynchronous Javascript An ...
- ajax局部操作,ajax局部刷新是怎么操作的?具体什么步骤呢?
大家知道什么是ajax吗?是的,ajax就是用来局部刷新的作用,那么ajax是如何进行页面的局部刷新呢?具体操作又是怎么样的呢?接下来与大家一起来了解下ajax局部刷新的操作. 简单的来说Ajax就是 ...
- java ajax 局部刷新,使用AJAX实现局部刷新的示例
一个AJAX局部刷新的例子: 前台页面: AJAX局部刷新 后台页面:[getPart.asp] dim rs dim sql Set rs = Server.CreateObject("A ...
最新文章
- 前沿分享|阿里云数据库解决方案架构师 王宏宇:云原生数据仓库AnalyticDB在零售行业的深度应用和业务价值
- 监控工具之zabbix server3.4 部署配置
- (64)Verilog HDL多模块重复例化
- Docker Windows 安装
- 服务器虚拟化的意思,服务器虚拟化存储的好处以及作用
- 巧用margin/padidng的百分比值占位,避免闪烁
- 2021“数维杯”国际大学生数学建模竞赛D题思路
- DELPHI 对象的本质 VMT
- 计算机电脑连接wifi,计算机应如何连接到WiFi?笔记本WiFi设置方法[详细步骤]
- 一文搞懂数据结构之 递归-八皇后问题
- UFS系列三:UFS数据包UPIU
- 如何下载redhat enterprise版本
- TensorFlow的Dataset的padded_batch使用
- 【基于时间序列的变形观测的数据处理方法的研究】
- 乐乐课堂_leleketang.com
- 基于SpringBoot的共享汽车管理系统
- IMSI号和IMEI解释
- apicloud studio 怎么开启自动wifi同步?
- 求余小技巧 码农场 » POJ 3641 Pseudoprime numbers 题解 《挑战程序设计竞赛》
- python随机森林特征重要性原理_使用Python的随机森林特征重要性图表