关闭

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

标签: web开发Ajaxel表达式jstl
788人阅读 评论(0) 收藏 举报
分类:

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

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


0
0
查看评论

WEB开发的套路——记录的更新

在福斯数据服务平台的设计中,笔者把所有的资源和操作都定义成了服务接口,数据操作无外乎:增(INS)、删(DEL)、改(UPD)。 把操作定义成服务接口的好处无非就是:统一定义、集中管理。开发者无需过分关注数据库的操作细节、SQL的编写,只需要定义服务接口即可。 更新的套路:本文中,更新模式有哪些呢:...
  • paulorwys
  • paulorwys
  • 2016-05-29 23:24
  • 324

ff开发者必备插件列表

Firefox的目标之一就是尽可能地使web开发者的生活更简单高效,并通过提供工具和具有很强扩展性的浏览器使人们创造出神奇的东西。使web开发者使用Firefox的时候,浏览器可以提供大量开发工具和选项。本文将这些工具做了简单整理。   Firebug 迄今为止,最知名的web...
  • ttpage
  • ttpage
  • 2013-06-24 13:54
  • 1042

WEB开发的套路——WEB工程的套路

下面是一个典型的WEB应用工程的内容结构,左图为代码,右图为部署资源: 1、代码部分 (1)aop用于记录Controller、Service等组件的函数的调用日志,可用于评测接口的调用频次和效能 (2)controller为控制层,其内容还可以细化: (3)dao为数据访问层,由于该工程使用的是非...
  • paulorwys
  • paulorwys
  • 2016-05-04 23:34
  • 349

WEB开发的套路——数据流向的套路

WEB开发的数据导向 反向:从WEB页面的数据展示→数据库中的数据存储; 按:数据展示→数据解析(页面端)→数据传输→数据包装→数据访问 正向:从数据存储(数据库)→数据展示(WEB页面)。 按:数据访问→数据包装→数据传输→页面解析→数据展示
  • paulorwys
  • paulorwys
  • 2016-05-02 23:08
  • 856

策略模式:网络小说的固定套路

策略模式:网络小说的固定套路近日小舅子让我推荐几本好看的玄幻小说,下好了发给他。想当初我唐家三少、天蚕土豆、跳舞等网络作者的小说也没少看,便满口答应了。百度一搜“唐家三少”,好家伙,几年不见又出了这么多新书,产量惊人啊!把这些小说简介一看,啧啧,还是那个 屌丝逆袭 套路啊。知乎上唐家三少有人喷有人捧...
  • u011240877
  • u011240877
  • 2016-08-28 17:10
  • 5549

【网页制作】——WEB标准三要素:html,css,javascrip

网页主要是由三部分组成的:结构,表现和行为。如果用一本书来表现,一本书分为了章,篇,节和段落,这就构成了一本书的”结构“,而这个组成部分用什么字体,什么字号,什么颜色,就称为了这本书的”表现“。由于传统的如何使固定的,不能变化的,因此不存在”行为“。但是网页作为一种媒体,它与书这种传统的媒介比起来可...
  • changyinling520
  • changyinling520
  • 2016-04-30 23:28
  • 1892

关于div填充整个页面的使用方法

1.div外层的父标签如果没有定义高度或宽度(用px或者其它单位定义,而非百分比),div用百分比是无效的。如果坚持要用百分比,请换成table标签。 2.如果一定要用div标签,一种方法是通过JS脚本获取浏览器高度或宽度然后给标签,用纯CSS方法,是这样:给login_wrapper加一条属性“...
  • qq_19007053
  • qq_19007053
  • 2016-12-15 10:53
  • 174

关于编程的人心与套路

有感而发                         今天在CS...
  • bitboss
  • bitboss
  • 2016-04-20 20:14
  • 871

WEB开发的套路——优雅的编程

(1)将数据和UI模板通过配置化的方式进行定义,方便数据内容与UI的调整(无需进入部署修改JSP); (2)简化了数据的处理,页面获取到的已经是填充好的内容,页面代码简洁,思路清晰。 (3)数据定义采用集中数据管理,支持SQL和存储过程,无需操心资源管理,效率高。
  • paulorwys
  • paulorwys
  • 2016-06-03 22:36
  • 392

掌握这个套路,80%的问题你都能靠自己解决

信息爆炸的时代,信息的获取变得非常容易,但也有太多无效的信息。如何分析,过滤,筛选有效的信息至关重要。对于开发而言,搜索有用信息,是提高开发效率的利器。 下面分享一些Stay在解决问题时的套路。包含分析需求,筛选,搜索,团队协作等一系列开发中可能遇到的问题。希望借此套路能提升大家的开发效率。 ...
  • xiaoping0915
  • xiaoping0915
  • 2017-03-08 21:11
  • 1690
    个人资料
    • 访问:41857次
    • 积分:824
    • 等级:
    • 排名:千里之外
    • 原创:38篇
    • 转载:0篇
    • 译文:0篇
    • 评论:29条
    最新评论