eclipse之MySQL数据库与Web前段存储交互

@0823

已于 2024-03-29 22:09:59 修改

阅读量328

点赞数 5

文章标签：数据库 mysql

于 2024-03-29 22:07:27 首次发布

本文链接：https://blog.csdn.net/m0_75014032/article/details/137157351

版权

首先我们新建一个HTML文件和一个Servlet文件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script  src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">  </script> 
</head>
<!-- onloag:刷新网页就会触发该方法 -->
<body onload="get()">
	<div id="hhh"></div>
</body>
<script>
function get(){
	$.ajax({
		type:"get",
		url:"/BigData02/StudentServlet",
		success:function(data){
			showData(data.data)
		}
	})
}
function showData(data){
	var html = '<table border="1">';
	for(var i = 0; i < data.length; i++){
		html += '<tr>';
		html += '<td>' + data[i].id + '</td>';
		html += '<td>' + data[i].name + '</td>';
		html += '<td>' + data[i].sno + '</td>';
		html += '<td>' + data[i].class + '</td>';
		html += '<td>' + data[i].sex + '</td>';
		html += '<td>' + data[i].age + '</td>';
		html += '<td>';
		html += '<input type="button" value="编辑" />';
		html += '<input type="button" value="删除" />';
		html += '</td>';
		html += '</tr>';
	}
	html += '</tablr>';
	$("#hhh").empty().append(html);
}
</script>
</html>

新建一个文件Package文件，命名为com.sql

DBC文件内容：

package com.sql;

import java.sql.Connection;
import java.sql.DriverManager;

public class DBConnection {

	public static void main(String[] args) {

	}

	String driver = "com.mysql.jdbc.Driver";
	String url = "jdbc:mysql://localhost:3306/bigdata02?useUnicode=true&characterEncoding=utf-8&serverTimezone=UTC&useSSL=false";
	String user = "root";
	String password = "j040823.";

	public Connection conn;

	public DBConnection() {

		try {
			Class.forName(driver);
			conn = (Connection) DriverManager.getConnection(url, user, password);
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

	public void close() {
		try {
			this.conn.close();
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

}

然后再HTML文件里写入

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script  src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">  </script> 
</head>
<!-- onloag:刷新网页就会触发该方法 -->
<body onload="get()">
	<div id="hhh"></div>
</body>
<script>
function get(){
	$.ajax({
		type:"get",
		url:"/BigData02/StudentServlet",
		success:function(data){
			showData(data.data)
		}
	})
}
function showData(data){
	var html = '<table border="1">';
	for(var i = 0; i < data.length; i++){
		html += '<tr>';
		html += '<td>' + data[i].id + '</td>';
		html += '<td>' + data[i].name + '</td>';
		html += '<td>' + data[i].sno + '</td>';
		html += '<td>' + data[i].class + '</td>';
		html += '<td>' + data[i].sex + '</td>';
		html += '<td>' + data[i].age + '</td>';
		html += '<td>';
		html += '<input type="button" value="编辑" />';
		html += '<input type="button" value="删除" />';
		html += '</td>';
		html += '</tr>';
	}
	html += '</tablr>';
	$("#hhh").empty().append(html);
}
</script>
</html>

包含了一个使用jQuery进行AJAX请求并展示用户数据的功能。页面加载完成后会调用 get() 方法，该方法通过AJAX请求从服务器获取数据，并在成功后调用 showData() 方法展示数据。

在展示数据的部分，会将获取到的数据以表格的形式展示在页面上，每一行代表一个用户的信息，包括用户ID、用户名和密码，并且每行最后有一个"编辑"和"删除"按钮。

请注意，为了使这段代码正常工作，需要确保 /BigData02/StudentServlet 能够正确处理 GET 请求并返回符合预期格式的用户数据

sql数据库文件内容：

更改sevtel文件;

package com.bigdata;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.sql.MysqlUtil;

/**
 * Servlet implementation class StudentServlet
 */
@WebServlet("/StudentServlet")
public class StudentServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public StudentServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String sql = "select * from student";
		String[] colums = {"id","name","sno","class","age","sex"};
		String data = MysqlUtil.getJsonBySql(sql, colums);
		System.out.println(data);
		
		
		response.setCharacterEncoding("utf-8");
		response.setContentType("application/json; charset=utf-8");
		response.getWriter().append(data);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

这段代码是一个简单的Java Servlet示例，用于处理HTTP GET请求。Servlet的作用是从数据库中获取学生信息并以JSON格式返回给客户端。

在代码中，首先导入了一些Java类库，包括处理HTTP请求和响应的类。然后定义了一个名为StudentServlet的Servlet类，继承自HttpServlet类。

在doGet方法中，首先定义了一个SQL查询语句，然后调用MysqlUtil类的方法从数据库中获取数据，并将结果转换为JSON格式。最后设置响应的编码和内容类型，并将JSON数据返回给客户端。

在doPost方法中，直接调用了doGet方法，即当收到POST请求时，会执行GET请求的处理逻辑。

需要注意的是，代码中使用了一些未定义的类和方法，比如MysqlUtil类和getJsonBySql方法，需要确保这些类和方法的实现是正确的。

结果为:

@0823

关注

5
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
eclipse之MySQL数据库与Web前段存储交互

页面加载完成后会调用 get() 方法，该方法通过AJAX请求从服务器获取数据，并在成功后调用 showData() 方法展示数据。在展示数据的部分，会将获取到的数据以表格的形式展示在页面上，每一行代表一个用户的信息，包括用户ID、用户名和密码，并且每行最后有一个"编辑"和"删除"按钮。在代码中，首先导入了一些Java类库，包括处理HTTP请求和响应的类。需要注意的是，代码中使用了一些未定义的类和方法，比如。方法中，首先定义了一个SQL查询语句，然后调用。方法，需要确保这些类和方法的实现是正确的。
复制链接

扫一扫