您的位置：首页 > Web前端 > JQuery

JSP+JQuery+AJAX继承模板页面开发

2014-10-16 19:49 288 查看

进行Web开发时，前端可以使用JQuery和Extjs进行页面渲染，后端可以选用基于Java的Spring MVC或者Python等，不管用哪种方式，某些情况下，有些方法是通用的，比如基于模板开发，以JSP页面为例。

现在很多网站的多个页面都遵循一个主体框架，可以把这个公用的部分提取出来取名 base-layout.jsp:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache,no-store" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>your title</title>
<link id="base" type="text/css" rel="stylesheet" href="<%=path%>/css/base.css" />
<script type="text/javascript" src="<%=path%>/js/jquery.js"></script>
<script type="text/javascript" src="<%=path%>/js/jquery.placeholder.js"></script>
<script type="text/javascript" src="<%=path%>/js/base.js"></script>
<script type="text/javascript" src="<%=path%>/js/check.js"></script>
<script type="text/javascript" src="<%=path%>/js/utils.js"></script>
<script type="text/javascript" src="<%=path%>/js/module.js"></script>

</head>

<body>
<div id="globalbody">
<div class="container">
<%@include file="header.jsp"%>
<div class="template_content" ></div>
<%@include file="footer.jsp"%>
</div>
</div>
</body>
</html>

后面使用base-layout作为模板，比如login.jsp:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="base-layout.jsp"%>
<script type="text/javascript">
$(document).ready(function() {
// add related css file
common.addCss('login.css');
$('.template_content').after($('.login'));
login.init();
});
</script>
<div class="login">
<div class="login_content">
<div id="login_logo">
</div>
<div id="login_detail">
<div id="login_form">
</div>
<div id="register">
</div>
<div id="forgot">
</div>
</div>
</div>

<div class="loginFail_content" style="display:none">
<div id="logo">
</div>
<div class="skip_detail">
<div class="imformation">
</div>
</div>
</div>
</div>

这样可以减少重复代码，专注于具体的模块部分代码实现，js代码也可以模块化编程：

var common = {
init : function(){
},
com-method-1 : function(){
},
......
com-method-n : function(){
}
};

var login = {
init : function(){
},
method-1 : function(){
},
......
method-n : function(){
}
};

var register = {
init : function(){
},
method-1 : function(){
},
......
method-n : function(){
}
};

var other-module = {
method-1 : function(){
},
......
method-n : function(){
}
};

然后只要在对应模块的jsp页面中加入一个javascript脚本代码，使用ready方法内部进行初始化即可，比如上面的login.jsp

<script type="text/javascript">
$(document).ready(function() {
// add related css file
common.addCss('login.css');
$('.template_content').after($('.login'));
login.init();
});
</script>

JS/CSS/HTML在线压缩：

http://tool.oschina.net/jscompress

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jsp jquery ajax

相关文章推荐

新的分享

章节导航