记一次Ajax从后台读取数据页面显示JSON数据而不是JSP页面

最新推荐文章于 2022-09-03 16:44:12 发布

二木成林

最新推荐文章于 2022-09-03 16:44:12 发布

阅读量1k

点赞数

分类专栏：异常处理文章标签：异常

本文链接：https://blog.csdn.net/cnds123321/article/details/102766590

版权

异常处理专栏收录该内容

305 篇文章 9 订阅

订阅专栏

错误

使用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();

二木成林

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
记一次Ajax从后台读取数据页面显示JSON数据而不是JSP页面

错误使用Ajax读取数据显示却是JSON数据。错误代码window.location.href = "/pageServlet?action=pager&user=student&tab=course_info_view";原因页面显示数据的方式：先到PageServlet中读取数据，然后再是JSP页面使用Ajax提交数据到PageServlet，请求成功...
复制链接

扫一扫