使用 DAO 模式和 AJAX 技术实现数据库表 User CRUD 操作
首先，我们需要创建一个 User 类来表示数据库表中的记录：
public class User {
private int id;
private String name;
private int age;
public User(int id, String name, int age) {
this.id = id;
this.name = name;
this.age = age;
}
// Getters and setters
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
}
接下来，我们需要创建一个 UserDAO 接口来定义数据库操作的方法：
public interface UserDAO {
List<User> getAllUsers();
User getUserById(int id);
void addUser(User user);
void updateUser(User user);
void deleteUser(int id);
}
然后，我们创建一个 UserDAOImpl 类来实现 UserDAO 接口，并使用 ajax 技术实现数据库操作的代码：
public class UserDAOImpl implements UserDAO {
private List<User> users;
public UserDAOImpl() {
users = new ArrayList<>();
}
@Override
public List<User> getAllUsers() {
return users;
}
@Override
public User getUserById(int id) {
for (User user : users) {
if (user.getId() == id) {
return user;
}
}
return null;
}
@Override
public void addUser(User user) {
users.add(user);
}
@Override
public void updateUser(User user) {
for (User u : users) {
if (u.getId() == user.getId()) {
u.setName(user.getName());
u.setAge(user.getAge());
break;
}
}
}
@Override
public void deleteUser(int id) {
Iterator<User> iterator = users.iterator();
while (iterator.hasNext()) {
User user = iterator.next();
if (user.getId() == id) {
iterator.remove();
break;
}
}
}
}
最后，我们可以使用 ajax 技术来处理用户的请求和响应。以下是一个使用 jQuery 的例子：
<!DOCTYPE html>
<html>
<head>
<title>Ajax User CRUD Example</title>
<script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
<script>
$(document).ready(function() {
// 添加用户
$('#addUserForm').submit(function(event) {
event.preventDefault();
var id = $('#id').val();
var name = $('#name').val();
var age = $('#age').val();
var user = {id: id, name: name, age: age};
$.ajax({
url: 'api/user',
type: 'POST',
data: JSON.stringify(user),
contentType: 'application/json',
success: function() {
alert('User added successfully');
},
error: function() {
alert('Error adding user');
}
});
});
// 删除用户
$('#deleteUserForm').submit(function(event) {
event.preventDefault();
var id = $('#deleteId').val();
$.ajax({
url: 'api/user/' + id,
type: 'DELETE',
success: function() {
alert('User deleted successfully');
},
error: function() {
alert('Error deleting user');
}
});
});
// 修改用户
$('#updateUserForm').submit(function(event) {
event.preventDefault();
var id = $('#updateId').val();
var name = $('#updateName').val();
var age = $('#updateAge').val();
var user = {id: id, name: name, age: age};
$.ajax({
url: 'api/user/' + id,
type: 'PUT',
data: JSON.stringify(user),
contentType: 'application/json',
success: function() {
alert('User updated successfully');
},
error: function() {
alert('Error updating user');
}
});
});
// 查询用户
$('#getUserForm').submit(function(event) {
event.preventDefault();
var id = $('#getId').val();
$.ajax({
url: 'api/user/' + id,
type: 'GET',
success: function(user) {
$('#getName').val(user.name);
$('#getAge').val(user.age);
},
error: function() {
alert('Error getting user');
}
});
});
});
</script>
</head>
<body>
<h1>Ajax User CRUD Example</h1>
<h2>Add User</h2>
<form id='addUserForm'>
<label for='id'>ID:</label>
<input type='text' id='id' name='id'>
<br>
<label for='name'>Name:</label>
<input type='text' id='name' name='name'>
<br>
<label for='age'>Age:</label>
<input type='text' id='age' name='age'>
<br>
<input type='submit' value='Add User'>
</form>
<h2>Delete User</h2>
<form id='deleteUserForm'>
<label for='deleteId'>ID:</label>
<input type='text' id='deleteId' name='deleteId'>
<br>
<input type='submit' value='Delete User'>
</form>
<h2>Update User</h2>
<form id='updateUserForm'>
<label for='updateId'>ID:</label>
<input type='text' id='updateId' name='updateId'>
<br>
<label for='updateName'>Name:</label>
<input type='text' id='updateName' name='updateName'>
<br>
<label for='updateAge'>Age:</label>
<input type='text' id='updateAge' name='updateAge'>
<br>
<input type='submit' value='Update User'>
</form>
<h2>Get User</h2>
<form id='getUserForm'>
<label for='getId'>ID:</label>
<input type='text' id='getId' name='getId'>
<br>
<label for='getName'>Name:</label>
<input type='text' id='getName' name='getName' readonly>
<br>
<label for='getAge'>Age:</label>
<input type='text' id='getAge' name='getAge' readonly>
<br>
<input type='submit' value='Get User'>
</form>
</body>
</html>
以上代码演示了如何利用 DAO 设计模式和 ajax 技术来实现数据库表用户记录的添加、删除、修改和查询操作。在这个例子中，我们使用了一个简单的 UserDAOImpl 类来模拟数据库操作，并使用 jQuery 的 ajax 函数来发送异步请求和接收响应。
原文地址: https://www.cveoy.top/t/topic/XQx 著作权归作者所有。请勿转载和采集!