以下是一个简单的增删查改
展示的示例，使用
PHP后端和JavaScript前端。
1. 设置数据库连接
```
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);
}
?>
```
2. 创建表格和表单
```html
<!DOCTYPE html>
<html>
<head>
<title>增删查改
展示</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>增删查改
展示</h1>
<table id="table">
<thead>
<tr>
<th>ID</th>
<th>名称</th>
<th>价格</th>
<th>数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 从数据库中获取数据并
展示 -->
</tbody>
</table>
<h2>添加/编辑
商品</h2>
<form id="form">
<label for="name">名称:</label>
<input type="text" name="name" id="name"><br>
<label for="price">价格:</label>
<input type="number" name="price" id="price"><br>
<label for="quantity">数量:</label>
<input type="number" name="quantity" id="quantity"><br>
<input type="hidden" name="id" id="id">
<input type="submit" value="提交">
</form>
</body>
</html>
```
3. 获取数据并
展示
```javascript
$(document).ready(function() {
// 从数据库中获取数据
$.ajax({
url: "get_data.
php",
type: "GET",
success: function(data) {
// 解析数据并
展示在表格中
$("#table tbody").html(data);
}
});
});
```
4. 处理添加和编辑请求
```javascript
$(document).ready(function() {
$("#form").submit(function(event) {
event.preventDefault();
var form_data = $(this).serialize();
$.ajax({
url: "save_data.
php",
type: "POST",
data: form_data,
success: function(data) {
// 重新获取数据并
展示
$.ajax({
url: "get_data.
php",
type: "GET",
success: function(data) {
$("#table tbody").html(data);
}
});
// 清空表单
$("#form")[0].reset();
$("#id").val("");
}
});
});
});
```
5. 处理删除请求
```javascript
$(document).ready(function() {
$(document).on("click", ".delete", function() {
var id = $(this).data("id");
$.ajax({
url: "delete_data.
php",
type: "POST",
data: {id: id},
success: function(data) {
// 重新获取数据并
展示
$.ajax({
url: "get_data.
php",
type: "GET",
success: function(data) {
$("#table tbody").html(data);
}
});
}
});
});
});
```
6. 处理编辑请求
```javascript
$(document).ready(function() {
$(document).on("click", ".edit", function() {
var id = $(this).data("id");
$.ajax({
url: "get_data_by_id.
php",
type: "POST",
data: {id: id},
dataType: "json",
success: function(data) {
$("#name").val(data.name);
$("#price").val(data.price);
$("#quantity").val(data.quantity);
$("#id").val(data.id);
}
});
});
});
```
7. 编写
PHP后端代码
get_data.
php - 获取所有数据并
展示在表格中
```
php
<?
php
include "connect.
php";
$sql = "SELECT * FROM products";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo "<tr><td>" . $row["id"] . "</td><td>" . $row["name"] . "</td><td>" . $row["price"] . "</td><td>" . $row["quantity"] . "</td><td><button class='edit' data-id='" . $row["id"] . "'>编辑</button> <button class='delete' data-id='" . $row["id"] . "'>删除</button></td></tr>";
}
} else {
echo "0 结果";
}
$conn->close();
?>
```
save_data.
php - 处理添加和编辑请求
```
php
<?
php
include "connect.
php";
$name = $_POST["name"];
$price = $_POST["price"];
$quantity = $_POST["quantity"];
$id = $_POST["id"];
if ($id) {
$sql = "UPDATE products SET name='$name', price='$price', quantity='$quantity' WHERE id='$id'";
} else {
$sql = "INSERT INTO products (name, price, quantity) VALUES ('$name', '$price', '$quantity')";
}
if ($conn->query($sql) === TRUE) {
echo "成功";
} else {
echo "错误: " . $sql . "<br>" . $conn->error;
}
$conn->close();
?>
```
delete_data.
php - 处理删除请求
```
php
<?
php
include "connect.
php";
$id = $_POST["id"];
$sql = "DELETE FROM products WHERE id='$id'";
if ($conn->query($sql) === TRUE) {
echo "成功";
} else {
echo "错误: " . $sql . "<br>" . $conn->error;
}
$conn->close();
?>
```
get_data_by_id.
php - 根据ID获取数据并返回JSON格式
```
php
<?
php
include "connect.
php";
$id = $_POST["id"];
$sql = "SELECT * FROM products WHERE id='$id'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
$row = $result->fetch_assoc();
echo json_encode($row);
} else {
echo "0 结果";
}
$conn->close();
?>
```
288
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
