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

Question

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

Answer 1

由于这是一个涉及到服务器端和客户端（浏览器）的操作，所以需要一些特定的环境和工具来完成这个任务。以下是可能需要完成此任务的步骤：

1. 设置Web开发环境
   首先，您需要安装一个Java Web开发环境，例如Eclipse、IntelliJ IDEA等。

然后，您需要安装Tomcat服务器，并在您的IDE中配置它作为Web服务器。

接下来，您需要安装并配置MariaDB数据库，并且创建一个名为student的表格

1. 创建students.jsp文件
   在您的IDE中，新建一个JSP页面命名为students.jsp。这个页面将会被后台程序访问，并且用于向浏览器返回学生列表。

2. 编写JavaScript代码
   使用jQuery库以及Ajax技术从后台请求学生列表，然后将它们显示在网页中。

javascript

$(document).ready(function() {
    $.ajax({
        url: "StudentListServlet",
        dataType: 'json',
        success: function(data) {
            var students = JSON.parse(data);
            for (var i = 0; i < students.length; i++) {
                var student = students[i];
                $("#studentList").append("<tr><td>" + student.id + "</td><td>" + student.name + "</td><td>" + student.age + "</td><td>" + student.address + "</td></tr>");
            }
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log(textStatus, errorThrown);
        }
    });
});

1. 编写Java Servlet代码
   在您的IDE中，新建一个Java Servlet命名为StudentListServlet。这个Servlet将会被students.jsp页面发出Ajax请求并返回学生列表。

java

import java.io.*;
import java.util.*;
import javax.servlet.*;
import javax.servlet.http.*;
import com.google.gson.Gson;
import java.sql.*;

public class StudentListServlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        List<Student> students = new ArrayList<Student>();
        Connection conn = null;
        String sql;
        try {
            Class.forName("org.mariadb.jdbc.Driver");
            conn = DriverManager.getConnection("jdbc:mariadb://localhost:3306/test", "root", "");
            sql = "SELECT * FROM student";
            Statement stmt = conn.createStatement();
            ResultSet rs = stmt.executeQuery(sql);
            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);
            response.setContentType("application/json");
            PrintWriter out = response.getWriter();
            out.print(json);
            out.flush();
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            try {
                conn.close();
            } catch (Exception e) {}
        }
    }
}

class Student {
    int id;
    String name;
    int age;
    String address;

    public Student(int id, String name, int age, String address) {
        this.id = id;
        this.name = name;
        this.age = age;
        this.address = address;
    }
}

1. 运行并测试
   将students.jsp和StudentListServlet部署到Tomcat服务器中