jQuery刷新包含的<jsp:include>页面

本文介绍了如何使用jQuery的load方法来刷新包含的JSP页面,适用于需要更新局部内容的场景。通过点击事件触发header.jsp的刷新操作,展示了具体的实现代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

JQuery刷新包含页面,以下两种形式均可:

 <%@include file="../include/header.jsp" %> 
 <jsp:include page
="../include/header.jsp"></jsp:include>

参考:http://designgala.com/how-to-refresh-div-using-jquery/
我们的页面一般包含几个页面,每个页面都是一个JSP,当我们用Jquery 向后台提交数据后,根据结果想刷新某一页面如(header.jsp),则可用 Jquery的 Div的load 方法:
$("#divName").load(url, data, callback);url为要刷新的子页面.

注意: Struts2 的Action设置返回类型为Json时其属性值在页面用ognl表达式将无法取到值,如果需要可以将值手动设置到范围对象。

参考代码:

Java代码   收藏代码
  1.     <body>  
  2.         <%@include file="../include/header.jsp" %>  
  3.         <input type="button" value="submit" id="button1"/>  
  4.     </body> 
  5.  
  6.     <script type="text/javascript">  
  7.         $(document).ready(function(){  
  8.             $("#button1").click(function(){  //点击事件
  9.                $("#header").load("../include/header.jsp");  //重新加载包含的jsp页面
  10.             });  
  11.         });  
  12.     </script>

转载于:https://www.cnblogs.com/limeiky/p/6208401.html

<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" version="3.1"> <!-- 1. 字符编码过滤器(必须放在第一个filter) --> <filter> <filter-name>encodingFilter</filter-name> <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class> <init-param> <param-name>encoding</param-name> <param-value>UTF-8</param-value> </init-param> <init-param> <param-name>forceEncoding</param-name> <param-value>true</param-value> </init-param> </filter> <filter-mapping> <filter-name>encodingFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> <!-- 2. 静态资源处理过滤器(新增) --> <filter> <filter-name>staticResourceFilter</filter-name> <filter-class>org.springframework.web.filter.ResourceUrlEncodingFilter</filter-class> </filter> <filter-mapping> <filter-name>staticResourceFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> <!-- 3. Spring MVC 前端控制器 --> <servlet> <servlet-name>dispatcher</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> <param-name>contextConfigLocation</param-name> <param-value>/WEB-INF/spring/spring-mvc.xml</param-value> </init-param> <init-param> <param-name>throwExceptionIfNoHandlerFound</param-name> <param-value>true</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <!-- 4. 静态资源放行配置(关键修改) --> <servlet-mapping> <servlet-name>default</servlet-name> <url-pattern>/statics/*</url-pattern> <url-pattern>/images/*</url-pattern> <url-pattern>*.css</url-pattern> <url-pattern>*.js</url-pattern> <url-pattern>*.png</url-pattern> <url-pattern>*.jpg</url-pattern> <url-pattern>*.gif</url-pattern> <url-pattern>*.ico</url-pattern> <url-pattern>*.woff</url-pattern> <url-pattern>*.woff2</url-pattern> <url-pattern>*.ttf</url-pattern> <url-pattern>*.svg</url-pattern> </servlet-mapping> <!-- 5. Spring MVC 映射(必须放在静态资源之后) --> <servlet-mapping> <servlet-name>dispatcher</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping> <!-- 6. 错误页面配置(可选) --> <error-page> <error-code>404</error-code> <location>/WEB-INF/views/error/404.jsp</location> </error-page> <!-- 7. 欢迎页配置 --> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> </web-app>/这是web.xml界面/<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>流浪狗救助站 - 首页</title> <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/style.css" /> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { // 动态数字动画效果 $('.stat-number').each(function() { var $this = $(this); var target = parseInt($this.text().replace('+', '')); var current = 0; var increment = target / 50; // 控制动画速度 var timer = setInterval(function() { current += increment; if (current >= target) { clearInterval(timer); current = target; $this.text(target + '+'); } else { $this.text(Math.floor(current) + '+'); } }, 20); }); // 平滑滚动到锚点 $('a[href^="#"]').on('click', function(event) { event.preventDefault(); $('html, body').animate({ scrollTop: $($.attr(this, 'href')).offset().top }, 800); }); }); </script> </head> <body> <header class="navbar"> <div class="nav-container"> <ul class="nav-menu"> <li class="active"><a href="${pageContext.request.contextPath}/views/user/home.jsp">首页</a></li> <li><a href="${pageContext.request.contextPath}/dogs">待领养狗狗</a></li> <li><a href="${pageContext.request.contextPath}/views/user/about.jsp">关于我们</a></li> <li><a href="${pageContext.request.contextPath}/views/user/contact.jsp">联系我们</a></li> <c:if test="${not empty sessionScope.user}"> <li><a href="${pageContext.request.contextPath}/logout">退出登录</a></li> </c:if> </ul> </div> </header> <div class="hero"> <h1 class="hero-title">为流浪狗发声,让世界更美好</h1> <p class="hero-subtitle">携手保护流浪动物,共建和谐生态环境</p> <div class="btn-container"> <a href="${pageContext.request.contextPath}/views/login.jsp" class="btn btn-primary">立即行动</a> <a href="#about-section" class="btn btn-secondary">了解更多</a> </div> </div> <section class="stats"> <div class="stat-item"> <div class="stat-number">25+</div> <div class="stat-label">救助项目</div> </div> <div class="stat-item"> <div class="stat-number">1200+</div> <div class="stat-label">志愿者</div> </div> <div class="stat-item"> <div class="stat-number">50+</div> <div class="stat-label">合作伙伴</div> </div> </section> <!-- 新增的详细介绍部分 --> <section id="about-section" class="about-section"> <div class="container"> <h2>关于潦草小狗救助站</h2> <div class="about-content"> <div class="about-text"> <h3>我们的使命</h3> <p>潦草小狗救助站成立于2010年,是一个非营利性组织,致力于为无家可归的流浪狗提供庇护、医疗和寻找永久家庭的机会。我们相信每只狗都值得被关爱和保护。</p> <h3>我们的工作</h3> <p>我们的工作包括:</p> <ul> <li>救助街头流浪狗并提供临时庇护</li> <li>为狗狗提供必要的医疗护理和绝育服务</li> <li>通过领养计划为狗狗寻找永久家庭</li> <li>开展公众教育活动,提高动物保护意识</li> <li>倡导动物福利政策的改进</li> </ul> <h3>我们的成就</h3> <p>自成立以来,我们已经:</p> <ul> <li>救助了超过5000只流浪狗</li> <li>为3000多只狗狗找到了永远的家</li> <li>开展了200多场公众教育活动</li> <li>建立了覆盖全市的志愿者网络</li> </ul> </div> <div class="about-image"> <img src="${pageContext.request.contextPath}/images/rescue-dog.jpg" alt="被救助的狗狗"> </div> </div> </div> </section> <section class="how-to-help"> <div class="container"> <h2>如何帮助它们</h2> <div class="help-options"> <div class="help-option"> <div class="help-icon">🏠</div> <h3>领养</h3> <p>给无家可归的狗狗一个温暖的家。领养不仅拯救了一只狗的生命,也为其他需要救助的狗狗腾出了空间。</p> <a href="${pageContext.request.contextPath}/dogs" class="btn btn-small">查看待领养狗狗</a> </div> <div class="help-option"> <div class="help-icon">🤝</div> <h3>志愿者</h3> <p>加入我们的志愿者团队,参与狗狗的日常照顾、遛狗、清洁等工作。您的每一分钟都能带来改变。</p> <a href="${pageContext.request.contextPath}/views/user/contact.jsp" class="btn btn-small">成为志愿者</a> </div> <div class="help-option"> <div class="help-icon">💝</div> <h3>捐赠</h3> <p>您的捐款将直接用于狗狗的食物、医疗和庇护所运营。每一分钱都能帮助改善狗狗的生活,助力它们走向更好的未来。</p> <a href="#" class="btn btn-small">立即捐赠</a> </div> </div> </div> </section> </body> </html>/这是index.jsp,为什么css文件不体现
最新发布
07-11
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> <html> <head> <!-- 页面meta --> <meta charset="utf-8"> <title>书虫补给站</title> <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css"> <link rel="stylesheet" href="${pageContext.request.contextPath}/css/AdminLTE.css"> <link rel="stylesheet" href="${pageContext.request.contextPath}/css/_all-skins.min.css"> <script src="${pageContext.request.contextPath}/js/jquery.min.js"></script> <script src="${pageContext.request.contextPath}/js/bootstrap.js"></script> <script src="${pageContext.request.contextPath}/js/app.js"></script> <script type="text/javascript"> function SetIFrameHeight() { var iframeid = document.getElementById("iframe"); //iframe id if (document.getElementById) { iframeid.height = document.documentElement.clientHeight; } } </script> </head> <body class="hold-transition skin-purple sidebar-mini"> <div class="wrapper"> <!-- 页面头部 --> <header class="main-header"> <!-- Logo --> <a href="${pageContext.request.contextPath}/admin/index.jsp" class="logo"> <!-- mini logo for sidebar mini 50x50 pixels --> <span class="logo-mini"><b>智阅云联</b></span> <!-- logo for regular state and mobile devices --> <span class="logo-lg"><b>书虫补给站</b></span> </a> <!-- Header Navbar: style can be found in header.less --> <nav class="navbar navbar-static-top"> <nav class="navbar navbar-static-top"> <div class="navbar-custom-menu"> <ul class="nav navbar-nav"> <li class="dropdown user user-menu"> <a > <img src="${pageContext.request.contextPath}/img/user1.jpg" class="user-image" alt="User Image"> <span class="hidden-xs">${USER_SESSION.name}</span> </a> </li> <li class="dropdown user user-menu"> <a href="${pageContext.request.contextPath}/userServlet?method=logout"> <span class="hidden-xs">注销用户</span> </a> </li> </ul> </div> </nav> </nav> </header> <!-- 页面头部 /--> <!-- 导航侧栏 --> <aside class="main-sidebar"> <!-- sidebar: style can be found in sidebar.less --> <section class="sidebar"> <!-- /.search form --> <!-- sidebar menu: : style can be found in sidebar.less --> <ul class="sidebar-menu"> <li id="admin-index"> <a href="${pageContext.request.contextPath}/admin/index.jsp"> <i class="fa fa-dashboard"></i> <span><b>新书推荐</b></span> </a> </li> <li> <a href="${pageContext.request.contextPath}/bookServlet?method=search" target="iframe"> <i class="fa fa-circle-o"></i> <span><b>图书借阅</b></span> </a> </li> <li> <a href="${pageContext.request.contextPath}/bookServlet?method=searchBorrowed" target="iframe"> <i class="fa fa-circle-o"></i> <span><b>当前借阅</b></span> </a> </li> <li> <a href="${pageContext.request.contextPath}/recordServlet?method=searchRecords" target="iframe"> <i class="fa fa-circle-o"></i> <span><b>借阅记录</b></span> </a> </li> </ul> </section> <!-- /.sidebar --> </aside> <!-- 导航侧栏 /--> <!-- 内容区域 --> <div class="content-wrapper"> <iframe width="100%" id="iframe" name="iframe" onload="SetIFrameHeight()" frameborder="0" src="${pageContext.request.contextPath}/bookServlet?method=selectNewbooks"></iframe> </div> </div> </body> </html>帮我优化一下这段代码
06-19
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值