WEB开发的套路——页面的填充

顾名思义，页面的填充就是用数据把页面“撑”起来。

本文以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文本块，然后撑页面。