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

最新推荐文章于 2022-06-30 04:13:02 发布

lgpjxjjxmumail

最新推荐文章于 2022-06-30 04:13:02 发布

阅读量1.8k

点赞数

分类专栏： web前端文章标签： jsp jquery ajax

本文链接：https://blog.csdn.net/spectrumleeee/article/details/40154195

版权

web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

进行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