欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JQuery 又谈ajax局部刷新

程序员文章站 2022-07-06 19:49:37
jquery 再谈ajax局部刷新。 案例: 描述: 1. 点击登录则弹出登录对话框 2. 如果用户名密码不正确,则提示错误信息...

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你可以参照 ,里面有详细的介绍。
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中的页面,显示“登录”

对于退出,你当然还是可以参照。

对于ajaxdone方法,你可以参照dialogajaxdone方法。

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