WEB开发的套路——页面的填充
2016-05-31 22:30
465 查看
顾名思义,页面的填充就是用数据把页面“撑”起来。
本文以j2ee、Spring MVC(3.1.0)、Tomcat环境来分享一下用数据“撑页面”的套路。
而通常“撑页面”的套路有两种:el表达式+jstl和ajax。
谈起这2种套路的适用性,那就不得不看看“页面的套路”:以通常的页面结构为例:列表页、详情页。
在不加载整个页面而改变页面局部的内容,只有使用ajax咯。
而使用ajax撑页面的套路又有两种:获取纯数据,拼凑HTML文本块和直接获取HTML文本块。因为无论如何:浏览器只识别HTML。
(1)获取纯数据,拼凑HTML文本块
直言不讳,该方式会造成代码量较大,可读性差,维护性也不好。
(2)直接获取HTML文本块
该方式听起来简洁明了,但是——填充HTML的事情又由谁来做呢?
虽然也适合用ajax的方式获取数据后再填充页面组件,但不便于代码的简洁和维护。
使用ajx方式,数据的获取、转换和包装都需要前端“操心”。
(1)Controller层:获取POJO,放入到Model中,并跳转到目标页面
(2)JSP页面:使用el表达式使用POJO的属性值填充页面
列表页需要使用jstl的循环标签(<c:forEach>)
(2)ajax适用于页面各种场合,但——更适用于页面局部需要动态改变的场合,例如:需要列表页具有排序功能、搜索列表页等。
ajax的使用套路有2种:(1)获取存数据(无论是单记录还是多记录),然后拼凑成HTML文本块,再去撑页面;
(2)直接获取HTML文本块,然后撑页面。
本文以j2ee、Spring MVC(3.1.0)、Tomcat环境来分享一下用数据“撑页面”的套路。
而通常“撑页面”的套路有两种:el表达式+jstl和ajax。
谈起这2种套路的适用性,那就不得不看看“页面的套路”:以通常的页面结构为例:列表页、详情页。
1列表页的套路
列表页一般提供排序的功能,例如:按照日期、按照点击量等。也就是说,页面的内容需要页面加载后动态改变。在不加载整个页面而改变页面局部的内容,只有使用ajax咯。
而使用ajax撑页面的套路又有两种:获取纯数据,拼凑HTML文本块和直接获取HTML文本块。因为无论如何:浏览器只识别HTML。
(1)获取纯数据,拼凑HTML文本块
直言不讳,该方式会造成代码量较大,可读性差,维护性也不好。
(2)直接获取HTML文本块
该方式听起来简洁明了,但是——填充HTML的事情又由谁来做呢?
/* * 填充内容视图 */ function fillContentsView() { var startTsp = $("#year_view1").val()+"-"+$("#month_view1").val()+"-"+$("#day_view1").val()+" "+$("#hour_view1").val()+":"+$("#minute_view1").val()+":00"; var endTsp = $("#year_view2").val()+"-"+$("#month_view2").val()+"-"+$("#day_view2").val()+" "+$("#hour_view2").val()+":"+$("#minute_view2").val()+":00"; var stationId= $("#station_view").val(); var uri = encodeURI("get_web_view.do"); var v_id = "get_wxd_record_list_view"; var view_id = "view_contents"; var pageNo = g_pageNo; //使用POST方法调用 $.post(uri, { v_id:(""+v_id), pageNo:(""+pageNo), p1:(""+startTsp), p2:(""+endTsp), p3:(""+stationId) }, function(text) { var obj = $.parseJSON(text); var html = "无数据"; if(obj[FsSpec.STATUS]==FsSpec.STATUS_OK) { var result = obj[FsSpec.CONTENTS]; // var header = result[FsSpec.CONTENTS_HEADER]; var body = result[FsSpec.CONTENTS_BODY]; var tail = result[FsSpec.CONTENTS_TAIL]; html = header+body+tail; if(obj[FsSpec.RS_COUNT] < obj[FsSpec.PAGE_SIZE]) { //无后续数据,不显示分页按钮 $("#btn_more").hide(); } else { $("#btn_more").show(); } } else { //当前无数据,不显示分页按钮 $("#btn_more").hide(); } //设置HTML $("#"+view_id).html(html); }); }
2详情页的套路
详情页一般用于展示记录的详情,不存在动态的数据改变。是最适合使用el表达式+jstl的展现方式。虽然也适合用ajax的方式获取数据后再填充页面组件,但不便于代码的简洁和维护。
使用ajx方式,数据的获取、转换和包装都需要前端“操心”。
(1)Controller层:获取POJO,放入到Model中,并跳转到目标页面
final String id = request.getParameter("u_id"); if(id == null) { //error.jsp return ("error"); } SYS_USER pojo = null; pojo = userService.findById(id); if(pojo == null) { //error.jsp return ("error"); } model.put("POJO", pojo); return ("sys/user_details");
(2)JSP页面:使用el表达式使用POJO的属性值填充页面
<!-- 表单开始 --> <form class="form-horizontal" id="form_details"> <div class="control-group"> <label class="control-label" for="name">用户标识</label> <div class="controls"> <input type="text" class="input-xlarge" value="${POJO.id}" readonly="readonly" /> </div> </div> <div class="control-group"> <label class="control-label" for="company">姓名</label> <div class="controls"> <input type="text" class="input-xlarge" value="${POJO.name}" readonly="readonly" /> </div> </div> <div class="control-group"> <label class="control-label" for="company">角色</label> <div class="controls" id="roleSet_list_view"> [%=exp(ROLESET)%] </div> </div>
结论
(1)el表达式+jstl,适用于页面无需动态加载的场合,例如:详情页或者不存在排序的列表页;列表页需要使用jstl的循环标签(<c:forEach>)
(2)ajax适用于页面各种场合,但——更适用于页面局部需要动态改变的场合,例如:需要列表页具有排序功能、搜索列表页等。
ajax的使用套路有2种:(1)获取存数据(无论是单记录还是多记录),然后拼凑成HTML文本块,再去撑页面;
(2)直接获取HTML文本块,然后撑页面。
相关文章推荐
- redis 安装
- 用户故事驱动的敏捷开发 – 2. 创建backlog
- Javascript初印象-基础_1
- 在Xcode中使用Git进行源码版本控制
- 用户故事驱动的敏捷开发 – 2. 创建backlog
- 在Xcode中使用Git进行源码版本控制
- [原]openstack-kilo--issue(二) openstack auth error
- MVC AuthorizeAttribute 动态授权
- Java基础知识:java.lang包-Object、String、StringBuffer和包装类等
- PYTHON DAY2_20160518
- 全面分析 Spring 的编程式事务管理及声明式事务管理
- javaWeb servlet生命周期
- EVP加密解密编程
- spark之RDD基本转换
- CSS vs JS动画:谁更快?---简单笔记
- Java EE开发平台随手记3——Mybatis扩展2
- HDU 2653 - Waiting ten thousand years for Love
- 用户故事驱动的敏捷开发 – 1. 规划篇
- HDU 5715 & 2016"百度之星" 复赛(Astar Round3)1004 XOR游戏(Trie)
- PYTHON DAY 1_20160517