可以去本人博客可能整齐看得更清楚些: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+" "+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.注意以上代码都是参考,如有您问题请评论留言,我也好修改文章,可能有些小错误。