SSM项目的Controller如何渲染JSON数据给JSP页面
更多内容请前往本人博客：http://zhenyunboy.icu/?p=360
下面将介绍具体的步骤：
1.在后端新建一个class文件以ResponseUtil命名，复制下面代码进去。
public class ResponseUtil { public static void write(HttpServletResponse response, Object o) throws Exception { response.setContentType("text/html;charset=utf-8"); response.addHeader("Access-Control-Allow-Origin", "*"); PrintWriter out = response.getWriter(); out.println(o.toString()); out.flush(); out.close(); } }
2.先定义一个HttpServletResponse response作为所需Controller类里面的方法的参数。
下面是本人代码仅供参考：
public String way(HttpServletResponse response) throws Exception {}
3.然后在所需的Controller文件里面加入如下代码：
JSONArray.fromObject();括号里面加入你的集合数据，集合数据是从数据库查询获得到的对象集合。
//1.首先新建一个集合，集合是一个对象集合如List<User>,本人的 //集合对象是question，你是什么你就用什么。 List<question> questionList = new ArrayList<question>(); //2.注意这里是用集合接受你从数据库查询出来的数据一般是 //questionList=XXXXService.query()，我是用的xml存储数据 //所以有点区别，仅参考，如果用的mysql的话一般是写该句代码： questionList=XXXXService.query(); //得到集合对象之后。再放入到JSONArray.fromObject()中 JSONObject result = new JSONObject(); JSONArray jsonArray = JSONArray.fromObject(questionList); result.put("rows", jsonArray); ResponseUtil.write(response, result);
4.下面是我的Controller文件具体方法代码示意：
@RequestMapping(value = "/xuanZe") public String way(HttpServletResponse response) throws Exception { int difficult = 0; int testSelect = 0; int pop_size = 5; ZuJuan g = new ZuJuan(); q = new QuestionFile(xuanze_qusetions_path); q = QuestionFile.getQFile();// 种群大小 ArrayList<Individual> pop; StringBuffer resultContent = null; resultContent = new StringBuffer(); pop = g.initial(pop_size, q, difficult); int j = 1; Individual best = pop.get(g.findBestIndividual(pop)); int[] c = best.xuanze_chrom; String bString = resultContent.toString(); List<question> questionList= new ArrayList<question>(); questionList.clear(); for (int k = 0; k < c.length; k++) { if (k != 27) { if (c[k] == 1) { // System.out.println(q.getXuanze_questions().get(k) + "\n\n"); AllMeal.add(q.getXuanze_questions().get(k)); } } else { break; } } //*********************************************** //上面所有代码不过是为了获取question对象数据而已， //因为本人不是用的mysql数据库，所以仅参考， //你是怎么获取数据就怎么写，下面的代码基本不变套用就行 //System.out.println(AllMeal); // 这里是获得项目路径下的WebRoot的路径 JSONObject result = new JSONObject(); JSONArray jsonArray = JSONArray.fromObject(questionList); result.put("rows", jsonArray); ResponseUtil.write(response, result); return null; }
5.写完如上代码后，才算完成后端的接口数据返回，还需要在前端获得且渲染给jsp页面。
如果你在地址栏输入访问地址（http://localhost:8080/movie_graph/zujuan/xuanZe.do）后出现如下情况，说明你数据返回成功。
6.接着写前端JSP，在XXX.jsp页面的head标签里面加入下列代码：
<script type="text/javascript"> function go(){ $.ajax({ method:"get",//这里一般是get，因为你输入地址访问到了数据，如果是post就访问不到数据 url:"http://localhost:8080/movie_graph/zujuan/xuanZe.do",/*这里要写nginx访问的全路径，*/ //也就是你在地址栏输入地址访问到的数据， //http://localhost:8080/你的项目名称/Controller里面类方法上面的名称/具体方法上面的名称 data:{}, dataType:'json',//注意这里一定要加这一句话，没有的话传过来的数据就是字符串 success: function(data){ var rows=data.rows;//这句代码必写，是已经获得到的具体json数据 //下面的代码都是给页面渲染数据且带有html标签显示。 //下面是循环便利你的json数据里面的单个对象，也就是说data.rows等价于question对象 //rows[i].identify 等价于question.identify var msg=""; for(var i=0;i<rows.length;i++){ msg += "<tr>"; msg += "<td>" + rows[i].identify + "</td>"; msg += "<td>" + rows[i].difficulty + "</td>"; msg += "<td>" + rows[i].context+" "+rows[i].difficulty+ "</td>"; msg += "<td>" + rows[i].a + "</td>"; msg += "<td>" + rows[i].c + "</td>"; msg += "<td>" + rows[i].d+ "</td>"; msg += "<td>" + rows[i].d + "</td>"; msg += "</tr>"; } $("#tab").html(msg);//这句是给html标签id为tab加上msg数据 } }); } </script>
7.在JSP页面中的body标签内加入如下代码，就能渲染数据了，注意需要点击按钮才能显示内容，也就说需要调用go()方法，你也可以让页面刷新就调用方法，用到的是将ajax({});里面内容复制到$(function(){})即可。
<input style="" onclick="go()" type="button" value=" 开始答题 " class="btn btn-default"/>
<table> <thead> <th>ID</th> <th>难度</th> <th>内容</th> <th>A</th> <th>B</th> <th>C</th> <th>D</th> </thead> <tbody id="tab"> </tbody> </table>
8.注意以上代码都是参考，如有您问题请评论留言，我也好修改文章，可能有些小错误。
