1. 服务端先返回页面基本结构（如message.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="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "https://www.jb51.net/"; %> <!DOCTYPE html> <!--[if lt IE 7]> <html lang="en"> <![endif]--> <!--[if IE 7]> <html lang="en"> <![endif]--> <!--[if IE 8]> <html lang="en"> <![endif]--> <!--[if IE 9]> <html lang="en"> <![endif]--> <!--[if !IE]><!--> <html lang="en"> <!--<![endif]--> <head> <!-- Meta--> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> <meta content=""> <meta content=""> <meta content=""> <title>消息中心</title> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]><script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script><![endif]--> <!-- Bootstrap CSS--> <link href="<%=path %>/app/css/bootstrap.css"> <!-- Vendor CSS--> <link href="<%=path %>/vendor/fontawesome/css/font-awesome.min.css"> <link href="<%=path %>/vendor/animo/animate+animo.css"> <!-- START Page Custom CSS--> <!-- Data Table styles--> <link href="<%=path %>/vendor/datatable/extensions/datatable-bootstrap/css/dataTables.bootstrap.css"> <link href="<%=path %>/vendor/datatable/extensions/ColVis/css/dataTables.colVis.css"> <!-- END Page Custom CSS--> <!-- App CSS--> <link href="<%=path %>/app/css/app.css"> <link href="<%=path %>/app/css/beadmin-theme-c2.css"> <link href="<%=path %>/vendor/sweetalert/lib/sweet-alert.css" /> <link href="<%=path %>/css/page.css"/> <!-- Modernizr JS Script--> <script src="<%=path %>/vendor/modernizr/modernizr.js" type="application/javascript"></script> <!-- FastClick for mobiles--> <script src="<%=path %>/vendor/fastclick/fastclick.js" type="application/javascript"></script>. <script> var basePath = '<%=basePath %>'; var pageNo = ${page.pageNo}; var totalCount = ${page.totalCount}; var totalPage = ${page>totalPage}; var pageSize = ${page.pageSize}; </script> </head> <body> <!-- START Main wrapper--> <div > <!-- START Main section--> <section> <!-- START Page content--> <div> <h3>消息中心 <!-- <div> <button type="button"> <span><i></i> </span>添加</button> </div>--> <small>消息管理</small> </h3> <!-- START panel--> <!-- START DATATABLE 3--> <div> <div> <div> <div> <form method="post" action="<%=path %>/page/messageSearch.action"> <div> <b>创建时间: </b> <div data-pick-time="false"> <input type="text" value='' disabled="disabled"> <span> <span></span> </span> </div> <span>—</span> <div data-pick-time="false"> <input type="text" value='' disabled="disabled"> <span> <span></span> </span> </div> </div> <div> <b>接收者: </b> <input type="text" value=''> </div> <div> <a href="javascript:void(0);" type="button">搜索</a> </div> <input type="hidden" value=''> </form> </div> <div> <table > <thead> <tr> <th>描述</th> <th tabindex="0" aria-controls="datatable1" rowspan="1" colspan="1" aria-label="Rendering engine: activate to sort column ascending">发送者</th> <th tabindex="0" aria-controls="datatable1" rowspan="1" colspan="1" aria-label="Rendering engine: activate to sort column ascending">接收者</th> <th tabindex="0" aria-controls="datatable1" rowspan="1" colspan="1" aria-label="Rendering engine: activate to sort column ascending">创建时间</th> <th>操作</th> </tr> </thead> <tbody> </tbody> <tfoot> <tr> </tr> </tfoot> </table> </div> <div> <div> <div> <div> </div> </div> <div></div> <div></div> </div> </div> </div> </div> </div> <!-- END DATATABLE 3--> </div> <!-- END Page content--> </section> <!-- END Main section--> </div> <!-- END Main wrapper--> <!-- START modal--> <div tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" > <div> <div> <div> <button type="button" data-dismiss="modal" aria-hidden="true">×</button> <h4>新建应用</h4> </div> <div> <form method="get" action="https://www.jb51.net/"> <fieldset> <div> <label>名称</label> <div> <input type="text"> </div> </div> <div> <label>描述</label> <div> <input type="text"> </div> </div> <div> <label>URL</label> <div> <input type="text"> </div> </div> <div> <label>类别</label> <div> <select> <option>Web</option> <option>Mobile</option> </select></div> </div> <div> <label>授权模式</label> <div> <select> <option>授权</option> <option>不授权</option> </select></div> </div> <div> <label>LOGO</label> <div> <input type="button"> </div> </div> </fieldset> </form> </div> </fieldset> <div> <button type="button" data-dismiss="modal">取消</button> <button type="button">确定</button> </div> </div> </div> </div> </div> <div tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div> <div> <div> <button type="button" data-dismiss="modal" aria-hidden="true">×</button> <h4>修改密码</h4> </div> <div> <form method="get" action="https://www.jb51.net/"> <fieldset> <div> <label>原密码</label> <div> <input type="text"> </div> </div> <div> <label>新密码</label> <div> <input type="password"> </div> </div> <div> <label>确认密码</label> <div> <input type="password"> </div> </div> </fieldset> </form> </div> <div> <button type="button" data-dismiss="modal">关闭</button> <button type="button">Save changes</button> </div> </div> </div> </div> <div tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div> <div> <div> <button type="button" data-dismiss="modal" aria-hidden="true">×</button> <h4>编辑节目特殊单</h4> </div> <div> <form method="get" action="https://www.jb51.net/"> <fieldset> <div> <label>表单标题</label> <div> <input type="text"> </div> </div> </fieldset> </form> </div> <div> <button type="button" data-dismiss="modal">关闭</button> <button type="button">确定</button> </div> </div> </div> </div> <!-- END modal --> <form method="post" action="<%=path%>/page/message_search.action"> <input type="hidden" value="" /> </form> <!-- START Scripts--> <!-- Main vendor Scripts--> <script src="<%=path %>/vendor/jquery/jquery.min.js"></script> <script src="<%=path %>/vendor/bootstrap/js/bootstrap.min.js"></script> <!-- Plugins--> <script src="<%=path %>/vendor/chosen/chosen.jquery.min.js"></script> <script src="<%=path %>/vendor/slider/js/bootstrap-slider.js"></script> <script src="<%=path %>/vendor/filestyle/bootstrap-filestyle.min.js"></script> <!-- Animo--> <script src="<%=path %>/vendor/animo/animo.min.js"></script> <!-- Sparklines--> <script src="<%=path %>/vendor/sparklines/jquery.sparkline.min.js"></script> <!-- MomentJs and Datepicker--> <script src="<%=path %>/vendor/moment/min/moment-with-langs.js"></script> <script src="<%=path %>/vendor/datetimepicker/js/bootstrap-datetimepicker.min.js"></script> <!-- Slimscroll--> <script src="<%=path %>/vendor/slimscroll/jquery.slimscroll.min.js"></script> <!-- Store + JSON--> <script src="<%=path %>/vendor/store/store+json2.min.js"></script> <!-- ScreenFull--> <script src="<%=path %>/vendor/screenfull/screenfull.min.js"></script> <!-- START Page Custom Script--> <!-- Data Table Scripts--> <script src="<%=path %>/vendor/datatable/media/js/jquery.dataTables.min.js"></script> <script src="<%=path %>/vendor/datatable/extensions/datatable-bootstrap/js/dataTables.bootstrap.js"></script> <script src="<%=path %>/vendor/datatable/extensions/datatable-bootstrap/js/dataTables.bootstrapPagination.js"></script> <script src="<%=path %>/vendor/datatable/extensions/ColVis/js/dataTables.colVis.min.js"></script> <!-- START Page Custom Script--> <script src="<%=path %>/vendor/wizard/js/bwizard.min.js"></script> <!-- Form Validation--> <script src="<%=path %>/vendor/parsley/parsley.min.js"></script> <!-- END Page Custom Script--> <!-- App Main--> <script src="<%=path %>/app/js/app.js"></script> <script src="<%=path %>/vendor/sweetalert/lib/sweet-alert.min.js"></script> <script src="<%=path %>/script/message.js"></script> <script src="<%=path %>/page/js/page.js"></script> <!-- END Scripts--> </body> </html>
2. example.js加载的时候，再去异步请求获取页面数据（表格、分页等），再动态创建表，分页链接等