JQuery再次讨论ajax部分刷新

JQuery再次谈到ajax部分刷新。

案例：

描述：

1.点击登录，弹出登录对话框。2.如果用户名和密码不正确，请提示错误消息。3.如果输入的信息正确，刷新登录信息，显示用户名和退出按钮。4.点击【退出】弹出提示信息，然后点击【确定】再次刷新用户名，回到第一张图片的位置。

这些简单的操作需要做什么样的工作？

1.加载登录/(用户名-退出)页面2。单击登录连接打开登录对话框3。提交登录表单时验证信息。4.验证通过后，关闭对话框，刷新1中的页面，显示“用户名-退出”。5.点击退出A标签，成功注销后再次刷新1页面，显示“登录”

加载登录/(用户名-退出)页面

div id=' log in _ tip ' URL=' $ { CTX }/mem/initlogintip '/div 1。给div一个ID作为页面索引，这样以后就可以定位到这里了。2.给出一个url属性，以便在加载页面时从jfinal服务器获取相应的信息，当然，也就是获取页面内容进行本地刷新。

//带有url的div主动请求服务器获取数据$ ('div [URL]'，$ p)。每个(function(){ var $ this=$(this)；var URL=$ this . attr(' URL ')；if (url) { $this.ajaxUrl({键入： 'POST '，url : url，回调： function(){ } })；} });使用url定位DIV，然后获取url，准备启动ajax请求。

当然，不要太关注ajaxUrl方法，后面会进一步解释。

单击登录连接打开登录对话框

复制代码如下： a title=' log in ' href=' $ { CTX }/mem/init log in/$ { session scope . username . username } ' rel=' externalnofollow ' target=' dialog ' width=' 600 ' log in/a

1.将属性目标添加到对话框属性中。当然，如果你还没有关注这一系列的教程，可以回顾一下如何通过a标签打开对话框以及如何打开模态对话框。2.增加宽度属性并设置对话框的宽度。

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

复制代码如下： form class=' pop _ log in _ form ' action=' $ { CTX }/mem/log in？callbackType=closecurrent El=log in _ tip ' method=' post ' on submit=' return validateCallback(this，dialogAjaxDone)'

1.这种形式的属性至关重要。动作中添加了两个参数“callbackType=closeCurrent”和“rel=login_tip”。callbackType指定成功登录后应关闭对话框，而rel指定关闭对话框后要刷新的本地对象。2.validateCallback你可以参考jfinal和bootstrap的登录跳转到实战，详细介绍。3.那么，对于dialogAjaxDone，有必要强调以下几点，请看以下内容。

函数dialogAjaxDone(JSON){ YUNM . AJaxDone(JSON)；if(JSON[YUNM . keys . status code]==YUNM . status code . ok | | JSON[YUNM . keys . status code]==YUNM . status code . info){ if(JSON . rel){//为数据加载指定相应的div。Varurl=JSON。Forwardurl，options={ElementID:JSON。rel }；var op=$。extend({ data : {}，elementId : ' '，callback : null }，options)；var $ panel=$(' # ' op . element id)；if(！URL){ URL=$ panel . attr(' URL ')；} if (url) { $panel.ajaxUrl({键入： 'POST '，url : url，数据： op.data，回调：函数(response) { if ($)。is FuncTion(op . callback))op . callback(响应)；} });} } if(' close current '==JSON . callbacktype){ close _ pop()；} else if(' closecurrenthenforward '==JSON . callbacktype){ close _ pop()；if(JSON . forward URl){ location . href=common . CTX JSON . forward URl；返回；}} }}1.请查看“if (json.rel) {”中的这一串代码，在这里通过json.rel获取A标签上的一系列参数，然后再次调用ajaxUrl方法进行本地刷新。

当你到了这里，你不得不说一声阿贾克斯

（函数($){ //DWZ设置区域$。setRegional=函数（键，值){ if(！$.区域)美元。区域={ };$.区域[键]=值；};$ .fn。extend({ initui : function(){ return this。每个()函数(){ if($).isFunction(initUI))initUI(this)；});}，loadUrl:函数(Url ,)数据、回调){ $(这个).ajaxUrl({url:url，data:data，callback : callback })；}，ajaxUrl:函数(op){ var $ this=$(this)；这个。触发器(YUNM。事件类型。页面清除)；$.ajax({ type: op.type || 'GET '，url: op.url，data: op.data，cache: false，success:函数(响应){ var json=YUNM.jsonEval(响应);if(JSON[YUM。钥匙。状态码]==YUNM。状态代码。错误){ if(JSON[YUM]。钥匙。消息])$ .淋浴(JSON[YUM。钥匙。消息])；} else { $this.html(响应)。initUI()；if ($ .is FuncTion(op . callback))响应);} }，错误： YUNM.ajaxError，statusCode: { 503:函数(xhr，ajaxOptions，thrownError) { $ .' showErr('服务器当前负载过大或者正在维护！| | thrownError)；} } });}, });通过创建交互式、快速动态网页应用的网页开发技术请求，向jfinal端发起请求，然后接收对应的回应，根据反应状态，我们将对应的页面渲染内容显示到局部差异中。

jfinal端就很简单了

public void initLoginTip(){ logger。信息('初始化登录/退出页面');渲染(' log in _ tip。JSP’)；}渲染到对应组件页面就好了。

说到这，登录的局部刷新就完成了，只要你注意到对应的方法就好了。

点击退出a标签时，登出成功后再次刷新一中的页面，显示"登录"

对于退出，你当然还是可以参照jfinal与引导程序的登出实战。

对于ajaxDone方法，你可以参照dialogAjaxDone方法。

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