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 Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
使用jQuery实现动态添加小广告
Jul 11 jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
jQuery中复合选择器简单用法示例
Mar 31 jQuery
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 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 Echo字符串的连接格式
2016/03/07 PHP
PHP如何获取当前主机、域名、网址、路径、端口等参数
2017/06/09 PHP
PDO::commit讲解
2019/01/27 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
IE与FireFox的兼容性问题分析
2007/04/22 Javascript
IE/FireFox具备兼容性的拖动代码
2007/08/13 Javascript
js 页面关闭前的出现提示的实现代码
2011/05/25 Javascript
js 实现浏览历史记录示例
2014/04/20 Javascript
JavaScript匿名函数用法分析
2015/02/13 Javascript
使用Node.js处理前端代码文件的编码问题
2016/02/16 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
2016/03/11 Javascript
jquery加载单文件vue组件的方法
2017/06/20 jQuery
微信小程序request请求后台接口php的实例详解
2017/09/20 Javascript
JS中call和apply函数用法实例分析
2018/06/20 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
2018/08/22 Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
2019/08/06 Javascript
解决layui数据表格Date日期格式的回显Object的问题
2019/09/19 Javascript
node.js express捕获全局异常的三种方法实例分析
2019/12/27 Javascript
[01:02:00]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第三场 1月24日
2021/03/11 DOTA
Python中实现三目运算的方法
2015/06/21 Python
图文详解WinPE下安装Python
2016/05/17 Python
Python正则表达式匹配中文用法示例
2017/01/17 Python
django-filter和普通查询的例子
2019/08/12 Python
jupyter实现重新加载模块
2020/04/16 Python
不到20行实现Python代码即可制作精美证件照
2020/04/24 Python
Python实现Keras搭建神经网络训练分类模型教程
2020/06/12 Python
在HTML5中使用MathML数学公式的简单讲解
2016/02/19 HTML / CSS
西尔斯百货官网:Sears
2016/09/06 全球购物
瑞典网上购买现代和复古家具:Reforma
2019/10/21 全球购物
幼教毕业生自我鉴定
2014/01/12 职场文书
初一地理教学反思
2014/01/16 职场文书
见习期自我鉴定范文
2014/03/19 职场文书
媒矿安全生产承诺书
2014/05/23 职场文书
节电标语大全
2014/06/23 职场文书
走群众路线剖析材料
2014/10/09 职场文书
六一亲子活动感想
2015/08/07 职场文书