随着 web 开发技术的不断发展，越来越多的网页应用需要提供前端用户对数据的直接编辑功能。为了实现这一目标，开发者需要学会如何利用 php 向服务器发送相关请求，以进行数据的更新、插入或删除。而本文将要介绍的方法，则是通过点击编辑按钮，直接在浏览器中修改数据，无需通过跳转或刷新来更新页面。
目录
- 修改数据的准备工作
- 实现点击编辑
- 修改数据的处理
- 完整代码
修改数据的准备工作
在开始之前，需要先确定需要编辑的数据在服务器上的位置。比如，如果需要编辑一张名为 users 的表中的某一条记录，那么可以使用如下代码连接到数据库并查询出数据：
// 连接数据库
$pdo = new PDO('mysql:host=localhost;dbname=test', 'username', 'password');
// 查询指定 ID 的用户数据
$id = $_GET['id'];
$stmt = $pdo->prepare('SELECT * FROM users WHERE id = ?');
$stmt->execute([$id]);
$user = $stmt->fetch();在获取到数据后，需要在页面中将其渲染出来，以供用户编辑。这里需要注意的是，我们需要为每个需要编辑的字段添加一个 input 元素，且其 value 值应为当前字段的值。同时，在每个 input 元素后面添加一个“确认”按钮，以便用户提交修改。
<form action="update.php" method="post"> <input type="hidden" name="id" value="<?php echo $user['id']; ?>"> <label>用户名：</label> <input type="text" name="username" value="<?php echo $user['username']; ?>"> <button type="submit">确认</button> </form>
实现点击编辑
为了让用户可以点击编辑按钮，我们需要添加一个“修改”链接，并在点击时打开编辑表单。这里使用了 JavaScript 来实现这一功能。
首先，我们需要为“修改”链接添加一个点击事件监听器，在用户点击时调用 showEditor 函数：
立即学习“PHP免费学习笔记（深入）”；
<a href="#" onclick="showEditor()">修改</a>
接下来，我们需要定义 showEditor 函数，并在其中创建表单元素，以用于用户编辑数据：
在v1.0的基础之上增加了英文版块，同时也制作了新的前台页面使其美观大方，使用了网络上功能最强大的在线编辑器（eWebEditor ）作为后台管理的编辑工具，前台内容只需后台添加、修改即可实现，使网站维护起来极其简单、方便、快捷，真正完全实现了“智能”的管理功能 功能特点： 1、前、后台完全分离。只要你稍微懂点的朋友，看了这套程序，都会认同我的观点。 2、采用网络上最流行的在线编辑
function showEditor() {
var form = document.createElement('form');
form.method = 'post';
form.action = 'update.php';
form.innerHTML = `
<input type="hidden" name="id" value="<?php echo $user['id']; ?>">
<label>用户名：</label>
<input type="text" name="username" value="<?php echo $user['username']; ?>">
<button type="submit">确认</button>
`;
document.body.appendChild(form);
}这里需要注意的是，我们在创建表单元素后，还需要将其添加到页面中（这里是添加到 body 元素中），以确保用户可以看到并编辑其中的内容。
修改数据的处理
在用户点击“确认”按钮后，表单数据将被提交到服务器的 update.php 文件中，以进行数据的更新操作。这里我们需要先获取表单数据，并使用 PDO 执行一个更新语句：
// 连接数据库
$pdo = new PDO('mysql:host=localhost;dbname=test', 'username', 'password');
// 获取表单数据
$id = $_POST['id'];
$username = $_POST['username'];
// 更新用户数据
$stmt = $pdo->prepare('UPDATE users SET username = ? WHERE id = ?');
$stmt->execute([$username, $id]);完成数据更新后，我们可以根据需要重定向用户到其它页面，或在当前页面中显示一个“修改成功”的提示。
echo '修改成功！';
完整代码
示例代码如下：
<!-- index.php -->
<?php
// 连接数据库
$pdo = new PDO('mysql:host=localhost;dbname=test', 'username', 'password');
// 查询指定 ID 的用户数据
$id = $_GET['id'];
$stmt = $pdo->prepare('SELECT * FROM users WHERE id = ?');
$stmt->execute([$id]);
$user = $stmt->fetch();
?>
<a href="#" onclick="showEditor()">修改</a>
<script>
// showEditor 函数
function showEditor() {
var form = document.createElement('form');
form.method = 'post';
form.action = 'update.php';
form.innerHTML = `
<input type="hidden" name="id" value="<?php echo $user['id']; ?>">
<label>用户名：</label>
<input type="text" name="username" value="<?php echo $user['username']; ?>">
<button type="submit">确认</button>
`;
document.body.appendChild(form);
}
</script><!-- update.php -->
<?php
// 连接数据库
$pdo = new PDO('mysql:host=localhost;dbname=test', 'username', 'password');
// 获取表单数据
$id = $_POST['id'];
$username = $_POST['username'];
// 更新用户数据
$stmt = $pdo->prepare('UPDATE users SET username = ? WHERE id = ?');
$stmt->execute([$username, $id]);
// 显示成功消息
echo '修改成功！';
?>在本文中，我们学习了如何通过点击编辑按钮，直接在浏览器中修改数据。需要注意的是，为了确保数据的安全性，我们需要在代码中添加一些必要的验证逻辑，以避免不必要的安全风险。最后，希望本文能对 PHP Web 开发者们有所帮助。
