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属性,设置对话框的宽度。

当输入信息正确,则刷新登录信息,显示用户名和退出按钮

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/5153.html