错误
使用Ajax读取数据显示却是JSON数据。
错误代码
window.location.href = "/pageServlet?action=pager&user=student&tab=course_info_view";
原因
页面显示数据的方式:先到PageServlet中读取数据,然后再是JSP页面使用Ajax提交数据到PageServlet,请求成功后再将数据渲染到前台JSP页面。
一开始思路就错了,使用Ajax先应该跳转到JSP页面而不是先到PageServlet中得到数据。
解决
点击超链接后跳转到JSP页面,而不是servlet获取数据,然后在JSP页面使用Ajax提交参数,然后请求成功后将响应数据显示在前台JSP页面表格中。
正确代码
将超链接跳转地址改成如下:
window.location.href="/jsp/student/course_info_view.jsp";
完整示例
test.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>测试</title>
<script src="../js/jquery.min.js"></script>
</head>
<body>
<table id="myTable">
<tr>
<td>序号</td>
<td>课程名称</td>
<td>学分</td>
<td>教师id</td>
</tr>
</table>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
url: "/pageServlet",
type: "GET",
data: {
"action": "pager",
"user": "student",
"tab": "course_info_view"
},
success: function (data) {
alert("成功")
alert(data.data[1].courseName);
alert(data.data.length);
for (var i = 0; i < data.data.length; i++) {
$("table#myTable tr:last").after(
"<tr>" +
"<td>" + data.data[i].id + "</td>" +
"<td>" + data.data[i].courseName + "</td>" +
"<td>" + data.data[i].credit + "</td>" +
"<td>" + data.data[i].teacherId + "</td>" +
"</tr>");
}
}
});
})
</script>
</body>
</html>
后台servlet部分代码:
ResultInfo resultInfo=new ResultInfo();
resultInfo.setData(courseList);
Gson gson=new Gson();
String s = gson.toJson(resultInfo);
response.setContentType("application/json;charset=utf-8");
response.getWriter().println(s);
response.getWriter().close();