要求:创建一个网页students.jsp,用于显示学生列表;在students.jsp中,使用jQeury,以Ajax技术,从后台请求学生列表,再将学生列表显示在网页中。
后台从Mariadb中读取学生列表;后台借助GSON库将List转换为Json字符串,返回给前端; 前端将Json字符串转换为数组,用for循环取出每一条,并构建网页元素显示。
表名:student,字段:id,name,age,addess.
具体的操作步骤和各个步骤的运行图是怎么样的?
由于这是一个涉及到服务器端和客户端(浏览器)的操作,所以需要一些特定的环境和工具来完成这个任务。以下是可能需要完成此任务的步骤:
然后,您需要安装Tomcat服务器,并在您的IDE中配置它作为Web服务器。
接下来,您需要安装并配置MariaDB数据库,并且创建一个名为student的表格
创建students.jsp文件
在您的IDE中,新建一个JSP页面命名为students.jsp。这个页面将会被后台程序访问,并且用于向浏览器返回学生列表。
编写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);
}
});
});
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;
}
}