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

利用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);
    });
},
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

  • 基于Springboot的学生网上选课系统，编程语言_Java ；数据库_MySQL；项目管理工具_Maven 前端技术
    2025-08-25 14:09
    项目整体采用Java语言进行开发，利用Springboot框架来简化Spring应用的搭建和开发过程。Springboot作为Spring的一部分，能够提供快速的开发环境和独立的运行能力，是目前流行的微服务开发框架之一。 在数据库管理...
  • cmsi386:CMSI 386 存储库 - 编程语言
    2021-07-08 23:15
    【标题】"CMSI 386 存储库 - 编程语言"指的是一个针对Intel 386架构的编程资源库，可能包含了与386处理器相关的代码、库或者教程。在这个上下文中，"CMSI"可能是“Computer Science and Information”（计算机科学与...
  • 分析Ajax接口获取QS排名的Python爬虫及QS排名文档.zip
    2018-04-30 20:50
    在本项目中，我们主要探讨的是如何利用Python编程语言，结合Ajax技术，来实现对QS全球大学排名数据的抓取。QS（Quacquarelli Symonds）世界大学排名是国际上认可度较高的一个高等教育机构排名，它综合评估了全球各...
  • 桂林理工大学—-web技术【实验一、Web客户端编程】.doc
    2024-07-19 09:19
    - **loadXMLDoc函数**：此函数用于发送Ajax请求获取服务器响应，并处理这些响应。它首先检查用户名是否为空或已存在，然后验证密码的一致性以及年龄的有效性。 - **reset函数**：用于重置错误信息，以便用户可以...
  • 【速成之路】网页编程必会的Ajax——JSON
    2022-05-22 21:57
    这个昵称我想了20分钟的博客   JSON( JavaScriptObject Notation, JavaScript 对象表示方法)是一种轻量级的数据交换格式，是基于ECMA Script(欧洲计算机协会制定的JS规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。...
  • 一款基于Java设计的高校学生选课系统源码
    2023-02-26 21:54
    【Java设计的高校学生选课系统】是一款专为高等教育机构设计的应用程序，它利用Java编程语言的强大功能，为学生提供方便、高效的选课服务。Java因其跨平台性、稳定性及丰富的类库支持，成为了开发此类系统的首选语言...
  • 利用Ajax&Json实现注册提示功能
    2020-05-08 18:31
    小小码农日渐积累的博客 序言 ajax技术是现在网页开发中的流行技术，是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的...4.导入相关的json.jar包,并加入相应的模块。 3.在findServlet中
  • AJAX的使用
    2023-05-30 21:27
    学不死就往死里学的博客 ajax不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式（JS中的一种API + 发送的http请求）。例如：百度关键词搜索、用户名的唯一性验证、新闻的异步加载XML是一种可扩展标记语言，用来被设计传输和...
  • 商业源码-编程源码-ASP.NET开放式实验室预约系统.zip
    2022-06-14 19:40
    该系统采用ASP.NET技术进行开发，结合C#编程语言，提供了用户友好的界面和高效的数据处理能力。 首先，ASP.NET是微软公司推出的Web应用开发平台，它构建在.NET Framework之上，提供了丰富的控件、事件驱动模型以及...
  • 十种可能改变IT行业走向的编程语言
    2016-12-30 22:37
    脉清心爱的博客 作为开发人员，我们真的还需要学习那么多的新型编程语言吗？现在所拥有的选择已经是相当的丰富，命令语言、函数语言、面向对象型语言、动态语言、编译语言、解释型语言以及脚本语言等等。这些身处业界前沿的编程语言...
  • 没有解决我的问题, 去提问

问题事件

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