- 浏览: 18427 次
文章分类
最新评论
jsp页面之间的调用
这里用到的知识点:
<jsp:include page="test.jsp"> <span style="white-space:pre"> </span><jsp:param value="sss.jsp" name="sdf" /> </jsp:include>
上面的是一个例子,即页面sss.jsp要引用test.jsp中的内容,比如test.jsp是多个其他页面都要调用的公共控件,比如导航栏,侧栏等。下面给出一个例子:
sss.jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="http://getbootstrap.com/favicon.ico"> <title>主页</title> <link href="/EVM/asserts/bootstrap3/css/bootstrap.min.css" rel="stylesheet"> <link href="/EVM/asserts/bootstrap3/css/dashboard.css" rel="stylesheet"> <link href="/EVM/asserts/css/evm.css" rel="stylesheet"> <script src="/EVM/asserts/bootstrap3/ie-emulation-modes-warning.js"></script> <!-- 为了做图表样例而添加的 --> <script type="text/javascript" src="/EVM/js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="/EVM/js/highcharts.js"></script> <script type="text/javascript" src="/EVM/js/exporting.js"></script> <script type="text/javascript" src="/EVM/js/chartOptions.js"></script> </head> <body> <div class="container-fluid"> <div class="row"> <span style="color:#ff0000;"><jsp:include page="test.jsp"> <jsp:param value="sss.jsp" name="sdf" /> </jsp:include></span> <div class="col-xm-9 col-md-10 main" style = "border:1px solid silver"> <div class="col-xm-12 col-md-5"> <h4 class="page-header">个人信息</h4> <div class="info-block" id="left"> <div class="row"> <div class="col-sm-12 col-md-12"> <div class="thumbnail"> <br> <img data-src="holder.js/300x300" alt="..."> <div class="caption"> <div class="row"> <div class="col-xs-5 text-right"> <label><strong>登录邮箱</strong></label> </div> <div class="col-xs-7"> <p>${user.userEmail}</p> </div> </div> <div class="row"> <div class="col-xs-5 text-right"> <label><strong>姓名</strong></label> </div> <div class="col-xs-7"> <p>${user.userName}</p> </div> </div> <div class="row"> <div class="col-xs-5 text-right"> <label><strong>电话</strong></label> </div> <div class="col-xs-7"> <p> <abbr title="Phone">${user.phoneNumber}</abbr> </p> </div> </div> <div class="row"> <div class="col-xs-5 text-right"> <label><strong>联系邮箱</strong></label> </div> <div class="col-xs-7"> <p> <abbr title="Phone">${user.msgEmail}</abbr> </p> </div> </div> <div class="row"> <div class="col-xs-5 text-right"> <label><strong>所在项目</strong></label> </div> <div class="col-xs-7"> <p> <c:forEach items="${user.projList }" var="proj"> ${proj.projName }; </c:forEach> </p> </div> </div> <div class="row"> <div class="col-xs-5 text-right"> <label><strong>所属部门</strong></label> </div> <div class="col-xs-7"> <p>${user.dept.deptName}</p> </div> </div> <div class="row-fluid"> <div class="text-right"> <button class="btn btn-sm" data-toggle="modal" data-target="#updateUserInfoModal" onclick="updateUserInfoValid.resetForm()">修改信息</button> </div> </div> </div> </div> </div> </div> </div> <br> </div> <div class="col-xm-12 col-md-7"> <h4 class="page-header">图表</h4> <div class="info-block" id="right"> <div id="Achartsample" style="width: 100%; height: 100%; margin: auto;"></div> </div> </div> </div> </div> </div> <div class="modal fade" id="updateUserInfoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <form class="form-horizontal" role="form" id="updateUserInfo" method="post" action="/EVM/userAction"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true">×</span><span class="sr-only">Close</span> </button> <h4 class="modal-title" id="myModalLabel">修改个人信息</h4> </div> <div class="modal-body"> <div class="form-group"> <label for="userName" class="col-sm-3 control-label">姓名:</label> <div class="col-sm-8"> <input type="text" class="form-control" id="userName" name="userName" value="${user.userEmail}" disabled> </div> </div> <div class="form-group"> <label for="userName" class="col-sm-3 control-label">姓名:</label> <div class="col-sm-8"> <input type="text" class="form-control" id="userName" name="userName" value="${user.userName}"> </div> <label for="userName" class="text-left" style="padding-left: 0px">*</label> </div> <div class="form-group"> <label for="phoneNumber" class="col-sm-3 control-label">联系电话:</label> <div class="col-sm-8"> <input type="text" class="form-control" id="phoneNumber" name="phoneNumber" value="${user.phoneNumber}"> </div> </div> <div class="form-group"> <label for="msgEmail" class="col-sm-3 control-label">联系邮箱:</label> <div class="col-sm-8"> <input type="text" class="form-control" id="msgEmail" name="msgEmail" value="${user.msgEmail}"> </div> </div> <div class="form-group"> <input type="hidden" name="deptId" value="${user.id}"> <input type="hidden" name="method" value="updateUserInfo"> </div> </div> <div class="modal-footer"> <a class="btn btn-default" data-dismiss="modal">取消</a> <button type="submit" class="btn btn-primary">确认</button> </div> </form> </div> </div> </div> <script src="/EVM/asserts/bootstrap3/jquery.min.js"></script> <script src="/EVM/asserts/bootstrap3/js/bootstrap.min.js"></script> <script src="/EVM/asserts/bootstrap3/docs.min.js"></script> <script src="/EVM/asserts/bootstrap3/ie10-viewport-bug-workaround.js"></script> <script src="/EVM/asserts/js/util.js"></script> <script type="text/javascript" src="/EVM/js/jquery.validate.min.js"></script> <script type="text/javascript"> updateUserInfoValid = null; $(document).ready( function() { $.ajaxSetup({ cache : false, async : false }); jQuery.validator.addMethod("isMobile", function(value, element) { var length = value.length; // var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+d{8})$/; var mobile = /^1[0-9]{10}$/; return this.optional(element) || (length == 11 && mobile.test(value)); }, ""); updateUserInfoValid = $("#updateUserInfo").validate({ debug : false, rules : { userName : "required", msgEmail : "email", phoneNumber : "isMobile", }, messages : { userName : "请输入用户名", msgEmail : "请输入正确的邮箱地址", phoneNumber : "请输入11未手机号码", } }); chartSample(Achartsample); // div的id不能和函数名完全相同 }); function logout() { $.post("/EVM/userAction?method=logout", {}, function(data) { window.location.replace(data); }); } </script> </body> </html>其中,红色部分就是引入的test.jsp页面,test.jsp如下:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href = "/EVM/img/sac_logo_small.jpg" rel="Icon"> <!-- 页面的地址栏上面,页面标题旁的小图标 --> <title>主页</title> <link href="/EVM/asserts/bootstrap3/css/bootstrap.min.css" rel="stylesheet"> <link href="/EVM/asserts/bootstrap3/css/dashboard.css" rel="stylesheet"> <link href="/EVM/asserts/css/evm.css" rel="stylesheet"> <script src="/EVM/asserts/bootstrap3/ie-emulation-modes-warning.js"></script> <!-- 为了做图表样例而添加的 --> <script type="text/javascript" src="/EVM/js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="/EVM/js/highcharts.js"></script> <script type="text/javascript" src="/EVM/js/exporting.js"></script> <script type="text/javascript" src="/EVM/js/chartOptions.js"></script> </head> <body> <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#" style="color: white">科研数据管理平台</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li><a style="color: white">${user.userEmail}</a></li> <li><a style="color: white" onclick="logout()">注销登录</a> </ul> </div> </div> </div> <div id="container-fluid"> <div id="row"> <div class="col-sm-2 col-md-2 hidden-xs" style="background-color: silver;height:860px"> <!-- 这里的高度是固定死的,即侧栏的高度 --> <br> <br> <br> <br> <div class="col-xm-12 col-md-12 "> <div class="panel-group" id="accordionLeftSide"> <!-- 数据图表 --> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title text-left"> <!-- text-center/left/right 文字的位置 --> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionLeftSide" id="accordionOfshujutubiaoId" href="#collapseOfshujutibiaoBody"> <span class="glyphicon glyphicon-off">数据图表</span></a> </h4> </div> <div id="collapseOfshujutibiaoBody" class="panel-collapse collapse"> <div class="panel-body text-left"> <!-- 外层手风琴的结构体 --> <div class="panel-group" id="accordionOfshujutubiao"> <!-- 绩效图表 --> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title text-left"> <!-- text-center/left/right 文字的位置 --> <a data-toggle="collapse" data-parent="#accordionOfshujutubiao" href="#collapseOfjixiaotubiao"><span class="glyphicon glyphicon-wrench"></span> 绩效图表</a> </h4> </div> <div id="collapseOfjixiaotubiao" class="panel-collapse collapse"> <!--若class中加入in表示默认打开专利的手风琴页面 --> <div class="panel-body text-left"> <li><a href="test.jsp">公司绩效</a></li> <li><a href="test.jsp">部门绩效</a></li> <li><a href="test.jsp">项目绩效</a></li> <li><a href="test.jsp">个人绩效</a></li> </div> </div> </div> <!-- 项目统计 --> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title text-left"> <!-- text-center/left/right 文字的位置 --> <a data-toggle="collapse" data-parent="#accordionOfshujutubiao" href="#collapseOfxiangmutongji"><span class="glyphicon glyphicon-wrench"></span> 项目统计</a> </h4> </div> <div id="collapseOfxiangmutongji" class="panel-collapse collapse"> <!--若class中加入in表示默认打开专利的手风琴页面 --> <div class="panel-body text-left"> <li><a href="test.jsp">二级单位项目</a></li> <li><a href="test.jsp">个人项目</a></li> </div> </div> </div> </div> </div> </div> </div> <!-- 业务信息 --> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title text-left"> <!-- text-center/left/right 文字的位置 --> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionLeftSide" id="accordionOfyewuxinxiId" href="#collapseOfyewuxinxiBody"> <span class="glyphicon glyphicon-off">业务信息</span></a> </h4> </div> <div id="collapseOfyewuxinxiBody" class="panel-collapse collapse"> <div class="panel-body text-left"> <!-- 外层手风琴的结构体 --> <!-- 业务单位信息 --> <li><a href = "infos.jsp">业务单位信息</a></li> </div> </div> </div> <!-- 绩效工作 --> <!-- 这里暂时不考虑本块的事情,是系统管理员要做的 --> <!-- <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title text-left"> text-center/left/right 文字的位置 <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionLeftSide" id="accordionOfjixiaogongzuoId" href="#collapseOfjixiaogongzuoBody"> <span class="glyphicon glyphicon-off">绩效工作</span></a> </h4> </div> <div id="collapseOfjixiaogongzuoBody" class="panel-collapse collapse"> <div class="panel-body text-left"> 外层手风琴的结构体 <div class="panel-group" id="accordionOfjixiaogongzuo"> 日常维护 <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title text-left"> text-center/left/right 文字的位置 <a data-toggle="collapse" data-parent="#accordionOfjixiaogongzuo" href="#collapseOfrichangweihu"><span class="glyphicon glyphicon-wrench"></span> 日常维护</a> </h4> </div> <div id="collapseOfrichangweihu" class="panel-collapse collapse"> 若class中加入in表示默认打开专利的手风琴页面 <div class="panel-body text-left"> <li><a href="test.jsp">部门管理</a></li> <li><a href="test.jsp">项目管理</a></li> <li><a href="test.jsp">个人管理</a></li> </div> </div> </div> KPI维护 <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title text-left"> text-center/left/right 文字的位置 <a data-toggle="collapse" data-parent="#accordionOfjixiaogongzuo" href="#collapseOfKPIweihu"><span class="glyphicon glyphicon-wrench"></span> KPI维护</a> </h4> </div> <div id="collapseOfKPIweihu" class="panel-collapse collapse"> 若class中加入in表示默认打开专利的手风琴页面 <div class="panel-body text-left"> <li><a href="test.jsp">基础KPI</a></li> <li><a href="test.jsp">考评表配置</a></li> </div> </div> </div> </div> </div> </div> </div> --> <!-- 系统维护--> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title text-left"> <!-- text-center/left/right 文字的位置 --> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionLeftSide" id="accordionOfxitongweihuId" href="#collapseOfxitongweihuBody"> <span class="glyphicon glyphicon-off">系统维护</span></a> </h4> </div> <div id="collapseOfxitongweihuBody" class="panel-collapse collapse"> <!--若class中加入in表示默认打开专利的手风琴页面 --> <div class="panel-body text-left"> <!-- 外层手风琴的结构体 --> <div class="panel-group" id="accordionOfxitongweihu"> <!-- 个人账户 --> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title text-left"> <!-- text-center/left/right 文字的位置 --> <a data-toggle="collapse" data-parent="#accordionOfxitongweihu" href="#collapseOfgerenzhanghu"><span class="glyphicon glyphicon-wrench"></span> 个人账户</a> </h4> </div> <div id="collapseOfgerenzhanghu" class="panel-collapse collapse"> <!--若class中加入in表示默认打开专利的手风琴页面 --> <div class="panel-body text-left"> <li><a href="test.jsp">个人信息</a></li> <li><a href="test.jsp">密码修改</a></li> </div> </div> </div> <!-- 数据信息 --> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title text-left"> <!-- text-center/left/right 文字的位置 --> <a data-toggle="collapse" data-parent="#accordionOfxitongweihu" href="#collapseOfshujuxinxi"><span class="glyphicon glyphicon-wrench"></span> 数据信息</a> </h4> </div> <div id="collapseOfshujuxinxi" class="panel-collapse collapse"> <!--若class中加入in表示默认打开专利的手风琴页面 --> <div class="panel-body text-left"> <li><a href="test.jsp">考核表</a></li> <li><a href="test.jsp">业务数据</a></li> <c:if test="${!fn:contains(user.type, '部门_') }"> <c:if test="${fn:contains(user.type, '项目_') }"> <!-- 两个判断语句,只有在是项目负责人时显示 --> <li><a href="patent.jsp">专利</a></li> <li><a href="patent.jsp">著作权</a></li> </c:if> </c:if> <li><a href="test.jsp">论文</a></li> <c:if test="${!fn:contains(user.type, '项目_') }"> <li><a href="patentView.jsp">个人专利</a></li> <!-- patentView.jsp针对专利的统计(部门)和分解(个人)。 著作权同专利 --> <li><a href="patentView.jsp">个人著作权</a></li> <!-- 不对项目负责人开放 --> </c:if> </div> </div> </div> </div> </div> </div> </div> </div> </div> <br> <br> <br> <br> </div> </div> </div> <script src="/EVM/asserts/bootstrap3/jquery.min.js"></script> <script src="/EVM/asserts/bootstrap3/js/bootstrap.min.js"></script> <script type="text/javascript" src="/EVM/js/jquery.js"></script> <script src="/EVM/asserts/bootstrap3/jquery.min.js"></script> <!-- 该行(jquery.min.js的引用代码)的顺序不能随便放,如果放在body中的最下面, --> <link rel="stylesheet" href="/EVM/css/jquery-ui.css"> <!-- 则插入的时间控件有问题,如果把该行删去,则手风琴打开后关不上 --> <script type="text/javascript" src="/EVM/js/jquery-ui.js"></script> <script type="text/javascript"> $(document).ready(function(){ $.ajaxSetup({ cache : false, async : false }); }); </script> </body>引入的效果还是可以的:
左侧的导航栏是可以include进来的,但是和原始的被引入页面相比,如果打开以后,就吹出现合不上的局面,这是在chrome上出现的问题,而对于IE来说,更是直接打不开,看来这种引入还是有兼容性的问题。
当前知道的解决方式,就是把原界面中的代码copy过来,如果哪位大神知道这种现象出现的原因,麻烦告知一下,不胜感激!
有关于这方面的问题,以后还会继续更新,在以后的工程项目中,如果看出了真是原因,会再次在这里写明正确的解决方式的。今天先写到这儿吧,时间也不早了,快22:00了,也该回去了,明天还要继续奋斗,每一个不曾起舞的早晨都是对生命的辜负!我相信我的付出会有长期的汇报,永不言弃,永不妄自菲薄!
相关推荐
本文主要讲述了如何使用JSP页面调用Applet实现人民币的大小写转换。该实现方法通过在JSP页面中嵌入一个Applet,使用JavaScript与Applet进行交互,实现实时的人民币大小写转换。 一、JSP页面调用Applet的实现 在JSP...
在这个源码包中,我们可以看到一个名为"newwork"的文件,它很可能包含了一系列JSP页面和相关的Servlet,用于演示如何在JSP中调用Servlet以及它们之间的交互。 **1. JSP基础** JSP页面由两部分组成:静态内容和动态...
`ExchangeData_XML.mxml`可能演示了如何通过HTTPService发送XML请求到JSP页面,并接收返回的XML数据。在Flex中,我们可以使用`mx.rpc.http.HTTPService`组件来发送HTTP请求。配置URL以指向JSP页面,设置方法(GET或...
### S2SH中JSP页面调用DAO的方法详解 #### 一、背景介绍 在Struts2 + Spring + Hibernate(简称S2SH)框架中,数据访问层(DAO层)通常与视图层(如JSP页面)进行解耦设计。这种设计模式有助于提高系统的可维护性和...
当JSP页面、JavaScript文件、服务器端以及客户端浏览器之间的编码设置不一致时,就会出现乱码现象。例如,如果JSP页面使用的是UTF-8编码,而JavaScript文件使用的是GBK编码,那么在读取和渲染过程中就可能发生乱码。...
在这个JSP网页播放器中,通过在HTML或JSP页面上插入WMP控件,可以实现音频文件的在线播放。开发者可以设置控件的各种属性,如自动播放、循环播放等。 ### 数据库(MySQL) MySQL是一种关系型数据库管理系统,用于...
例如,`iframe`中的`jsp`页面可以调用父页面的JavaScript函数: ```jsp ;charset=UTF-8" language="java" %> <title>iframe内的页面 function sendDataToParent(data) { window.parent.postMessage(data, "*...
**JSP页面组成详解** JavaServer Pages(JSP)是一种基于Java技术的动态网页开发工具,它结合了静态HTML和动态Java代码,使得开发者能够轻松地创建交互式Web应用程序。在JSP页面中,主要由三类元素构成:JSP标签、...
在Flash中,如果希望调用JSP页面上的JavaScript函数,则可以使用`ExternalInterface.addCallback`方法。此方法可以注册一个回调函数,该回调函数能够在Flash端执行后被调用。 ```actionscript // Flash端代码 ...
在网页开发中,`iframe`...本篇文章将深入探讨如何在`iframe`中调用JavaScript,实现父页面与子页面之间的方法交互。 一、iframe的基本使用 在HTML中,我们可以通过`<iframe>`标签来插入一个框架,例如: ```html ...
`jsp:include`动作主要用于将一个JSP页面嵌入到另一个JSP页面中。当`jsp:include`被执行时,它会读取目标页面的内容,并将其结果插入到当前页面中指定的位置。这一过程是在服务器端完成的,也就是说,目标页面的内容...
在这个"SSH项目后台JSP页面.zip"压缩包中,主要包含的是项目的Web内容部分,尤其是JSP页面,这是用户与服务器交互的前端界面。 首先,让我们深入了解SSH框架的每个组件: 1. **Struts2**:这是一个MVC(Model-View...
### JSP页面跳转方法详解 #### 一、概述 JSP(Java Server Pages)是一种动态网页技术标准,被广泛应用于构建动态网站和Web应用程序。在JSP开发中,页面跳转是一项非常基础且重要的功能,它使得用户能够在不同的...
JSP页面在服务器端被解析成Servlet,然后由Java虚拟机执行,生成的HTML页面最终发送给客户端浏览器。JSP通常与Servlet一起使用,构建可扩展和动态的网络应用。 ### Matlab并行计算工具箱 Matlab是一个高性能的数值...
这通常涉及到创建一个实现了上述接口的JSP页面或者Servlet。例如,创建一个名为`MyWebServiceImpl.jsp`的文件,其中包含了`MyWebService`接口的实现。 ```jsp class MyWebServiceImpl implements MyWebService {...
在处理请求时,JSP页面和Servlet之间的主要区别在于它们的职责分工:JSP更专注于视图层,而Servlet主要用于处理业务逻辑。 ### 开发工具与实践 在实际开发中,我们常常使用IDE如Eclipse、IntelliJ IDEA等来编写和...
当调用 `forward()` 方法时,服务器会把当前请求转发到指定的目标资源(如JSP页面、Servlet等)。这种方式不会生成新的HTTP请求,而是直接将当前请求交给另一个资源处理。因此,请求转发过程中,客户端的URL不会发生...
它们是可重用的组件,可以方便地在多个JSP页面之间共享。在"个人空间"项目中,Javabean可能被用来封装用户对象,包括用户名、密码、个人简介等属性,以及与这些属性相关的操作,如注册、修改个人信息等。JSP可以通过...
本示例着重讲解如何在JSP页面中实现多个提交按钮,并使它们分别提交到不同的页面。 首先,我们需要了解JSP的基本结构和工作原理。JSP是一种基于Java的动态网页技术,它允许开发者在HTML代码中嵌入Java代码或JSP标签...
- **调用JavaBean**: 在JSP页面中,可以通过`<jsp:useBean>`标签加载JavaBean,并使用`<jsp:setProperty>`和`<jsp:getProperty>`标签来调用其方法和获取返回结果。 #### 结论 通过在JSP中调用JavaBean,并利用JDBC...