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

怎样创建一个网页students.jsp来显示学生列表？怎么在students.jsp中，使用jQeury，以Ajax技术，从后台请求学生列表，再将学生列表显示在网页中?

首先，需要创建一个名为students.jsp的网页。在该页面中，可以使用jQuery的Ajax方法来请求后台获取学生列表。

students.jsp代码示例：

<!DOCTYPE html>
<html>
<head>
  <title>学生列表</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <h1>学生列表</h1>
  <table id="student-table">
    <thead>
      <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
  <script>
    $(document).ready(function() {
      $.ajax({
        url: "getStudentList.jsp", // 请求后台的地址
        type: "GET", // 请求方式为GET
        dataType: "json", // 返回的数据类型为json
        success: function(data) { // 请求成功的回调函数
          $.each(data, function(index, student) { // 遍历学生列表
            var tr = $("<tr></tr>"); // 创建一个tr元素
            var td1 = $("<td></td>").text(student.id); // 创建一个td元素，并设置其文本内容为学号
            var td2 = $("<td></td>").text(student.name); // 创建一个td元素，并设置其文本内容为姓名
            var td3 = $("<td></td>").text(student.age); // 创建一个td元素，并设置其文本内容为年龄
            var td4 = $("<td></td>").text(student.gender); // 创建一个td元素，并设置其文本内容为性别
            tr.append(td1, td2, td3, td4); // 将td元素添加到tr元素中
            $("#student-table tbody").append(tr); // 将tr元素添加到表格中
          });
        },
        error: function(jqXHR, textStatus, errorThrown) { // 请求失败的回调函数
          console.error("请求失败：" + textStatus, errorThrown);
        }
      });
    });
  </script>
</body>
</html>

在上面的示例中，我们使用了jQuery的$.ajax()方法来请求后台获取学生列表。其中，url属性指定了请求的地址，type属性指定了请求的方式为GET，dataType属性指定了返回的数据类型为json。在请求成功的回调函数中，我们遍历学生列表，创建一个tr元素，并将学生的信息添加到tr元素中。最后，将tr元素添加到表格中。如果请求失败，控制台会输出错误信息。

在后台，需要编写一个名为getStudentList.jsp的JSP页面。该页面用于处理学生列表的请求，并返回一个json格式的学生列表。

getStudentList.jsp代码示例：

<%@ page language="java" contentType="application/json; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.ArrayList" %>
<%@ page import="java.util.List" %>
<%
  List<Student> studentList = new ArrayList<Student>();
  studentList.add(new Student("001", "张三", 20, "男"));
  studentList.add(new Student("002", "李四", 21, "女"));
  studentList.add(new Student("003", "王五", 22, "男"));
  studentList.add(new Student("004", "赵六", 23, "女"));
  response.setContentType("application/json");
  response.setCharacterEncoding("UTF-8");
  out.print(new com.alibaba.fastjson.JSONObject().toJSONString(studentList));
%>

在上面的示例中，我们创建了一个studentList列表，其中包含四个学生信息。然后，将该列表转换为json格式，并通过response对象返回给前台。需要注意的是，需要引入fastjson库来完成json的转换。

最后，将getStudentList.jsp和students.jsp放到服务器中，通过浏览器访问students.jsp页面，即可看到学生列表。

你打算把学生列表存放在哪里呢？

不知道你这个问题是否已经解决, 如果还没有解决的话:

文章：jsp中,第一个方法中调用第二个含有ajax的方法时，第一次会不执行第二个方法。中也许有你想要的答案，请看下吧

以下回答来自chatgpt:

我将回答分成以下几个步骤来进行：

从后台获取学生数据

首先需要定义后台接口，以便能够从服务器获取学生数据。接口URL：http://www.liulongbin.top:3006/api/student，调用方式：GET。

可以使用以下代码从后台获取学生数据：

function getStudents() {
  $.ajax({
    url: "http://www.liulongbin.top:3006/api/student",
    method: "GET",
    success: function(result) {
      // 在这里处理响应数据
    },
    error: function(xhr, status, error) {
      console.error(error);
    }
  });
}

解析学生数据

数据由JSON格式返回，需要对其进行解析。可以使用JSON.parse()方法将JSON字符串转换为JavaScript对象。

function getStudents() {
  $.ajax({
    url: "http://www.liulongbin.top:3006/api/student",
    method: "GET",
    success: function(result) {
      var students = JSON.parse(result);
      // 在这里处理解析后的数据
    },
    error: function(xhr, status, error) {
      console.error(error);
    }
  });
}

将数据展示在网页中

使用jQuery操作DOM，将解析后的数据添加到HTML页面中。可以使用如下代码将学生列表添加到页面中：

function displayStudents(students) {
  // 获取列表容器
  var list = $("#students-list");

  // 清空容器
  list.empty();

  // 遍历学生列表
  for (var i = 0; i < students.length; i++) {
    // 创建列表项元素
    var item = $("<li>");

    // 添加学生姓名到列表项
    item.append(students[i].name);

    // 添加学生年龄到列表项
    item.append(" (" + students[i].age + ")");

    // 添加列表项到列表容器
    list.append(item);
  }
}

function getStudents() {
  $.ajax({
    url: "http://www.liulongbin.top:3006/api/student",
    method: "GET",
    success: function(result) {
      var students = JSON.parse(result);
      displayStudents(students);
    },
    error: function(xhr, status, error) {
      console.error(error);
    }
  });
}

完整的代码如下所示：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>学生列表</title>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
  <h1>学生列表</h1>

  <ul id="students-list"></ul>

  <script>
    function displayStudents(students) {
      // 获取列表容器
      var list = $("#students-list");

      // 清空容器
      list.empty();

      // 遍历学生列表
      for (var i = 0; i < students.length; i++) {
        // 创建列表项元素
        var item = $("<li>");

        // 添加学生姓名到列表项
        item.append(students[i].name);

        // 添加学生年龄到列表项
        item.append(" (" + students[i].age + ")");

        // 添加列表项到列表容器
        list.append(item);
      }
    }

    function getStudents() {
      $.ajax({
        url: "http://www.liulongbin.top:3006/api/student",
        method: "GET",
        success: function(result) {
          var students = JSON.parse(result);
          displayStudents(students);
        },
        error: function(xhr, status, error) {
          console.error(error);
        }
      });
    }

    $(document).ready(function() {
      getStudents(); // 在页面加载完成后自动获取学生列表
    });
  </script>
</body>
</html>

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^