SSM项目的Controller文件中怎样将集合转为json数据渲染在JSP页面

可以去本人博客可能整齐看得更清楚些:http://zhenyunboy.icu/?p=360,或者本人博客园:https://www.cnblogs.com/zhenyunboy/articles/13929203.html
下面将介绍具体的步骤:
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页面。
如果你在地址栏输入访问地址出现如下情况,说明你数据返回成功。
在这里插入图片描述
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+"&emsp;"+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="background-color: cyan;" 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.注意以上代码都是参考,如有您问题请评论留言,我也好修改文章,可能有些小错误。

猜你喜欢

转载自blog.csdn.net/qq_34134299/article/details/109499911