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

         项目绑定前台页面数据时，由于开始是自己画页面，就比较随意，都是传的集合。后来找了外面的美工做了页面，新页面传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，然后放入modelreturn "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" onchange="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" onchange="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传参数呈现数据。希望对大家有所帮助。