两种方式实现页面数据绑定

         项目绑定前台页面数据时，由于开始是自己画页面，就比较随意，都是传的集合。后来找了外面的美工做了页面，新页面传Json比较方便，就又改成了json绑定。

        下面就分别介绍一下这两种数据绑定方式。

        1、绑定集合：

        基本思路：把查询出来的集合放到一个model里，引入taglib标签库后，可以在页面直接取出（类似网上商城）的开发方式。

        方法简介：从前台js里传入参数oneLevelFieldId到findOneLevelField这个url，然后进行查询。

        

@RequestMapping(value="/findTeacher",method=RequestMethod.GET)
		public String findOneLevelField(@RequestParam(value="oneLevelFieldId",required=false)String oneLevelFieldId,Model model,HttpServletResponse response,HttpServletRequest request)
				throws NamingException{
		String dataBaseName = "database_java";
		
		//查询全部一级领域
		List<Field> fields = new ArrayList<>();
		fields = teacherBean.queryOneLevelField(dataBaseName);
		model.addAttribute("oneLevelFields",fields); //把fields这个集合命名为oneLevelFields，然后放入model
		
		return "findTeacher";// 返回到页面
	}

        下面是从页面取出：

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%--引入的标签--%>

<%--取出代码值--%>
<div class="col-sm-2" >
	<select id="oneLevelFields" name="oneLevelFields" οnchange="changeOneLevelField()"class="form-control">
	<option value="0" selected="selected">请选择</option>
	<c:forEach items="${oneLevelFields }" var="oneLevelField">
		<option value="${oneLevelField.id }">${oneLevelField.fieldName }</option>		
	</c:forEach>
	</select>
</div>

        方法二：绑定json

        实现思路：先把查询结果（集合）转为json，再传到js中进行绑定

        

/**
	 * 根据一级领域ID查询二级领域
	 * 
	 * @param oneLevelFieldId
	 * @param request
	 * @param response
	 * @throws UnsupportedEncodingException
	 */
	@RequestMapping(value="findTwoLevelFieldByOneLevelField",method=RequestMethod.GET)
	public void findTwoLevelFieldByOneLevelField(@RequestParam(value="oneLevelFieldId",required=false)String oneLevelFieldId,Model model,HttpServletRequest request,
			HttpServletResponse response) throws UnsupportedEncodingException{
		//System.out.println("oneLevelFieldId:"+oneLevelFieldId);
		List<Field> fields = new ArrayList<Field>();
		fields = teacherBean.queryTwoLevelFieldByOneLevelField(oneLevelFieldId,
				dataBaseName);//二级领域的查询结果
		JackJsonUtils jackJsonUtils = new JackJsonUtils();
		String result = "";
		try { 
			result = jackJsonUtils.BeanToJson(fields); //集合转成json
			//System.out.println("result:" + result);
		} catch (Exception e) {
			e.printStackTrace();
		}
		outToJson.outJson(response, result);//转为json后输出
	}

        下面在js中进行绑定

/**
 * 根据一级领域ID查询二级领域
 */
function changeOneLevelField() {
	var oneLevelField = $("#oneLevelFields");
	var oneLevelFieldId = oneLevelField.find("option:selected").attr("value");
	if (oneLevelFieldId == "0") {
		$("#twoLevelFields").empty();
		$("#twoLevelFields").append(
				"<option value='0' selected='selected'>请选择</option>");
		return false;
	}
	$.ajax({
		type : "GET",
		url : "findTwoLevelFieldByOneLevelField",
		data : {
			"oneLevelFieldId" : oneLevelFieldId
		},
		dataType : "JSON",
		success : function(data) {
			$("#twoLevelFields").empty();
			$("#twoLevelFields").append(
					"<option value='0' selected='selected'>请选择</option>");
			// data为后台返回的Json信息
			for (var n = 0; n < data.length; n++) {
				var twoLevelFieldId = data[n].id;
				var twoLevelFieldName = data[n].fieldName;
				$("#twoLevelFields").append(
						"<option id='" + twoLevelFieldId + "' value='"
								+ twoLevelFieldId + "'>" + twoLevelFieldName
								+ "</option>");
			}
		},
		error : function(state) {
			alert("查询二级领域失败！");
		}
	})
}

        下面是jsp页面中的部分

 

<div class="col-sm-2">
<span style="white-space:pre">	</span><select id="twoLevelFields" name="twoLevelFields" οnchange="addFields()" class="form-control" >
	<span style="white-space:pre">	</span><option value="0" selected="selected">请选择</option>
<span style="white-space:pre">	</span></select>	
</div>

         这就是两种页面数据绑定的方法。第一种适用于页面直接加载就呈现数据，不用写js；第二种适用于js传参数呈现数据。希望对大家有所帮助。