红衣Gr 2023-06-12 14:50 采纳率: 100%
浏览 40
已结题

利用Ajax获取并显示学生列表

要求：创建一个网页students.jsp，用于显示学生列表；在students.jsp中，使用jQeury，以Ajax技术，从后台请求学生列表，再将学生列表显示在网页中。
后台从Mariadb中读取学生列表；后台借助GSON库将List转换为Json字符串，返回给前端； 前端将Json字符串转换为数组，用for循环取出每一条，并构建网页元素显示。
表名：student,字段：id,name,age,addess.
具体的操作步骤和各个步骤的运行图是怎么样的？

  • 写回答

1条回答 默认 最新

  • threenewbee 2023-06-12 15:33
    关注
    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>学生列表</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $.ajax({
                type : "GET",
                url : "studentsData",
                dataType : "json",
                success : function(data) {
                    var students = JSON.parse(data);
                    $.each(students, function(id, student){
                        var tr=$("<tr></tr>");
                        var td_id=$("<td></td>").text(student.id);
                        var td_name=$("<td></td>").text(student.name);
                        var td_age=$("<td></td>").text(student.age);
                        var td_address=$("<td></td>").text(student.address);
                        tr.append(td_id);
                        tr.append(td_name);
                        tr.append(td_age);
                        tr.append(td_address);
                        $("#studentList").append(tr);
                    });
                },
                error : function(XMLHttpRequest, textStatus, errorThrown) {
                }
            });
        });
    </script>
</head>
<body>
<h1>学生列表</h1>
<table border="1">
    <thead>
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>地址</th>
    </tr>
    </thead>
    <tbody id="studentList">
    </tbody>
</table>
</body>
</html>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


<script>
    $(document).ready(function() {
        $.ajax({
            type : "GET",
            url : "studentsData",
            dataType : "json",
            success : function(data) {
                var students = JSON.parse(data);
                $.each(students, function(id, student){
                    var tr=$("<tr></tr>");
                    var td_id=$("<td></td>").text(student.id);
                    var td_name=$("<td></td>").text(student.name);
                    var td_age=$("<td></td>").text(student.age);
                    var td_address=$("<td></td>").text(student.address);
                    tr.append(td_id);
                    tr.append(td_name);
                    tr.append(td_age);
                    tr.append(td_address);
                    $("#studentList").append(tr);
                });
            },
            error : function(XMLHttpRequest, textStatus, errorThrown) {
            }
        });
    });
</script>

public class StudentsDataServlet extends HttpServlet {

    private static final long serialVersionUID = 1L;

    Connection conn = null;
    Statement stmt = null;
    ResultSet rs = null;

    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        try {
            Class.forName("org.mariadb.jdbc.Driver");
            conn = DriverManager.getConnection("jdbc:mariadb://localhost:3306/mydb", "root", "123456");

            //查询
            stmt = conn.createStatement();
            String sql = "SELECT * FROM student";
            rs = stmt.executeQuery(sql);

            //转换为Json字符串
            List<Student> students = new ArrayList<Student>();
            while (rs.next()) {
                int id = rs.getInt("id");
                String name = rs.getString("name");
                int age = rs.getInt("age");
                String address = rs.getString("address");

                Student student = new Student(id, name, age, address);
                students.add(student);
            }
            Gson gson = new Gson();
            String json = gson.toJson(students);

            //将Json字符串返回给前端
            response.setContentType("application/json;charset=utf-8");
            PrintWriter out = response.getWriter();
            out.println(json);
            out.flush();
            out.close();

        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            try {
                if (rs != null)
                    rs.close();
                if (stmt != null)
                    stmt.close();
                if (conn != null)
                    conn.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }
}

<dependency>
    <groupId>com.google.code.gson</groupId>
    <artifactId>gson</artifactId>
    <version>2.8.5</version>
</dependency>
使用GSON库将List转换为Json字符串 在后台Servlet类中，在读取完学生信息后，使用GSON库将List转换为Json字符串。
Gson gson = new Gson();
String json = gson.toJson(students);
将Json字符串返回给前端 在后台Servlet类中，将Json字符串作为响应的数据返回给前端。
response.setContentType("application/json;charset=utf-8");
PrintWriter out = response.getWriter();
out.write(json);
out.flush();
out.close();


success : function(data) {
    var students = JSON.parse(data);
    $.each(students, function(id, student){
        var tr=$("<tr></tr>");
        var td_id=$("<td></td>").text(student.id);
        var td_name=$("<td></td>").text(student.name);
        var td_age=$("<td></td>").text(student.age);
        var td_address=$("<td></td>").text(student.address);
        tr.append(td_id);
        tr.append(td_name);
        tr.append(td_age);
        tr.append(td_address);
        $("#studentList").append(tr);
    });
},
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 系统已结题 6月20日
  • 已采纳回答 6月12日
  • 创建了问题 6月12日

悬赏问题

  • ¥15 如何在vue.config.js中读取到public文件夹下window.APP_CONFIG.API_BASE_URL的值
  • ¥50 浦育平台scratch图形化编程
  • ¥20 求这个的原理图 只要原理图
  • ¥15 vue2项目中，如何配置环境，可以在打完包之后修改请求的服务器地址
  • ¥20 微信的店铺小程序如何修改背景图
  • ¥15 UE5.1局部变量对蓝图不可见
  • ¥15 一共有五道问题关于整数幂的运算还有房间号码 还有网络密码的解答？(语言-python)
  • ¥20 sentry如何捕获上传Android ndk 崩溃
  • ¥15 在做logistic回归模型限制性立方条图时候，不能出完整图的困难
  • ¥15 G0系列单片机HAL库中景园gc9307液晶驱动芯片无法使用硬件SPI+DMA驱动，如何解决？