使用ajax实现增删改查
时间: 2023-12-26 10:03:52 浏览: 33
Ajax 是一种使用 JavaScript 创建异步 web 应用程序的技术。通过 Ajax,你可以在不重新加载整个网页的情况下,对网页的某些部分进行更新。以下是一个使用 Ajax 实现增删改查的示例:
1. 前端页面:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax Example</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h2>Ajax Example</h2>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="text" id="email" name="email"><br><br>
<input type="button" id="add" value="Add">
</form>
<br>
<table id="table">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<tbody id="table-body">
</tbody>
</table>
<script>
// 添加数据
$('#add').click(function() {
var name = $('#name').val();
var email = $('#email').val();
$.ajax({
url: 'add.php',
type: 'POST',
data: {name: name, email: email},
success: function(response) {
alert(response);
$('#name').val('');
$('#email').val('');
get_data();
}
});
});
// 获取数据
function get_data() {
$.ajax({
url: 'get.php',
type: 'POST',
success: function(response) {
$('#table-body').html(response);
}
});
}
get_data();
// 删除数据
$(document).on('click', '.delete', function() {
var id = $(this).attr('data-id');
$.ajax({
url: 'delete.php',
type: 'POST',
data: {id: id},
success: function(response) {
alert(response);
get_data();
}
});
});
// 更新数据
$(document).on('click', '.edit', function() {
var id = $(this).attr('data-id');
var name = $(this).closest('tr').find('.name').text();
var email = $(this).closest('tr').find('.email').text();
$('#name').val(name);
$('#email').val(email);
$('#add').attr('data-id', id);
});
$(document).on('click', '#add', function() {
var id = $(this).attr('data-id');
var name = $('#name').val();
var email = $('#email').val();
$.ajax({
url: 'update.php',
type: 'POST',
data: {id: id, name: name, email: email},
success: function(response) {
alert(response);
$('#name').val('');
$('#email').val('');
$('#add').removeAttr('data-id');
get_data();
}
});
});
</script>
</body>
</html>
```
2. 后端代码(add.php):
```php
<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
$name = $_POST['name'];
$email = $_POST['email'];
// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);
// 检查连接
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
$sql = "INSERT INTO MyGuests (firstname, email) VALUES ('$name', '$email')";
if ($conn->query($sql) === TRUE) {
echo "添加成功";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
$conn->close();
?>
```
3. 后端代码(get.php):
```php
<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);
// 检查连接
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
$sql = "SELECT id, firstname, email FROM MyGuests";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// 输出数据
while($row = $result->fetch_assoc()) {
echo "<tr><td class='name'>" . $row["firstname"]. "</td><td class='email'>" . $row["email"] . "</td><td><button class='edit' data-id='" . $row["id"] . "'>Edit</button><button class='delete' data-id='" . $row["id"] . "'>Delete</button></td></tr>";
}
} else {
echo "0 结果";
}
$conn->close();
?>
```
4. 后端代码(delete.php):
```php
<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
$id = $_POST['id'];
// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);
// 检查连接
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
$sql = "DELETE FROM MyGuests WHERE id=$id";
if ($conn->query($sql) === TRUE) {
echo "删除成功";
} else {
echo "Error deleting record: " . $conn->error;
}
$conn->close();
?>
```
5. 后端代码(update.php):
```php
<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
$id = $_POST['id'];
$name = $_POST['name'];
$email = $_POST['email'];
// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);
// 检查连接
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
$sql = "UPDATE MyGuests SET firstname='$name', email='$email' WHERE id=$id";
if ($conn->query($sql) === TRUE) {
echo "更新成功";
} else {
echo "Error updating record: " . $conn->error;
}
$conn->close();
?>
```
这个示例中,我们使用 Ajax 技术,通过调用后端的 PHP 脚本实现了增删改查功能。在前端页面中,我们创建了一个表单,用于添加数据,同时也展示了一个数据表格,用于展示已有的数据。我们通过 Ajax 技术,将表单中的数据提交到后端 PHP 脚本中,进行数据库操作。同时,我们也通过 Ajax 技术,从后端 PHP 脚本中获取数据,并将数据展示在表格中。用户也可以通过表格中的“删除”和“编辑”按钮,来进行数据的删除和修改操作。