极致体验ajax局部和整体刷新
程序员文章站
2022-06-14 15:34:40
本篇文章将向大家介绍如何通过jquery的load方法进行局部刷新,load方法本身很简单,但是想要结合到jfinal和bootstrap的公共项目中,需要我们多加努力了。...
本篇文章将向大家介绍如何通过jquery的load方法进行局部刷新,load方法本身很简单,但是想要结合到jfinal和bootstrap的公共项目中,需要我们多加努力了。
首先我先来来说一下方案。
$p.load(url,data,function(response,status,xhr))
那么我们需要提供ajax请求的回调函数至少两个参数url以及jquery对象。
另外,我们还可能有地址栏重载的可能。
location.href
所以,我们还需要提供一个参数。
于是,我们封装三个属性
// 局部加载 string elementid = getpara("elementid"); string loadpage = getpara("loadpage"); // 地址栏跳转路径 string locationurl = getpara("locationurl"); setattr("elementid", elementid); setattr("loadpage", loadpage); setattr("locationurl", locationurl); <a href="${ctx}/mem/logout?elementid=log_tip&loadpage=header_login_tip" <form class="pop_login_form" action="${ctx}/mem/login?callbacktype=closecurrent&elementid=log_tip&loadpage=header_login_tip"
注意:
. jfinal端封装三个属性提供给前端的回调函数。
. jsp中将对应的参数传递给jfinal
然后,我们来使用
function dialogajaxdone(json) { yunm.ajaxdone(json); if (json[yunm.keys.statuscode] == yunm.statuscode.ok || json[yunm.keys.statuscode] == yunm.statuscode.info) { if ("closecurrent" == json.callbacktype) { close_pop(); } if (json.locationurl) { location.href = json.locationurl; } else { // 如果指定了后调转页面,进行调转 $("#" + json.elementid).load(common.loadpath + json.loadpage + common.viewtype); } } }
我提供类似的方法,主要是按照标题中给出的方案。
注意点
要使用jquery的load方法,就必须将对应的页面所有的引用都加上。
<!doctype html public "-//wc//dtd html . transitional//en" "http://www.w.org/tr/html/loose.dtd"> <html xmlns="http://www.w.org//xhtml"> <%@ page language="java" contenttype="text/html; charset=utf-" pageencoding="utf-"%> <%@ include file="/components/common/taglib.jsp"%> <script type="text/javascript"> $("a[target=ajaxtodo]").ajaxtodo(); </script> <div> <c:choose> <c:when test="${sessionscope.username!=null}"> <a href="javascript:void();" id="mycenter" style=""> ${sessionscope.username}<s class="icon_arrow icon_arrow_down"></s> </a> <i class="line"></i> <a href="${ctx}/mem/logout?elementid=log_tip&loadpage=header_login_tip" target="ajaxtodo" callback="ajaxdone" atitle="你确定要退出吗?" id="user_login_out" style="padding: px;">退出</a>
结语:本文全部内容到此结束,我想你也得到了极致的体验。后续本站还有更多内容更新,请继续关注哦。