资讯类网站如何填充内容(页面的填充就是用数据把页面“撑”起来。)

　　资讯类网站如何填充内容(页面的填充就是用数据把页面“撑”起来。)

　　顾名思义，页面填充就是用数据“支撑”页面。

　　本文使用j2ee、Spring MVC（3.1.0）、Tomcat环境分享使用数据“支持页面”的套路。

　　“支持页面”通常有两种方式：el表达式+jstl和ajax。

　　说到这两个套路的适用性，就得看“页面套路”：以通常的页面结构为例：列表页、详情页。

　　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 属性值填充页面

用户标识

姓名

角色

[%=exp(ROLESET)%]

　　综上所述

　　(1）el表达式+jstl，适用于页面不需要动态加载的场合，比如详情页或者列表页没有排序；

　　列表页需要使用jstl()的loop标签

　　（2）ajax适用于页面的各种场合，但更适合页面部分需要动态变化的场合，例如：列表页面需要有排序功能，搜索列表页等。

　　ajax的使用方式有两种：（1）获取存储的数据（无论是单条记录还是多条记录），然后拼凑成HTML文本块，然后支持页面；

　　(2） 直接获取HTML文本块，然后支持页面。