웹 개발 기술이 지속적으로 발전함에 따라 프런트엔드 사용자에게 데이터를 직접 편집할 수 있는 기능을 제공해야 하는 웹 애플리케이션이 점점 더 많아지고 있습니다. 이 목표를 달성하려면 개발자는 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();데이터를 얻은 후 페이지에서 이를 렌더링해야 합니다. 사용자가 편집할 수 있습니다. 여기서 주목해야 할 점은 편집해야 하는 각 필드에 대해 입력 요소를 추가해야 하며 해당 값은 현재 필드의 값이어야 한다는 것입니다. 동시에 사용자가 변경 사항을 제출할 수 있도록 각 입력 요소 뒤에 "확인" 버튼을 추가하세요.
<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 함수를 호출해야 합니다.
<a href="#" onclick="showEditor()">修改</a>
다음으로 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);
}여기서 주목해야 할 점은 양식 요소를 생성한 후 사용자가 콘텐츠를 보고 편집할 수 있도록 이를 페이지(여기서는 본문 요소)에 추가해야 한다는 것입니다.
사용자가 "확인" 버튼을 클릭하면 데이터 업데이트 작업을 위해 양식 데이터가 서버의 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 '修改成功！';
샘플 코드는 다음과 같습니다.
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[&#39;id&#39;]; ?>">
<label>用户名：</label>
<input type="text" name="username" value="<?php echo $user[&#39;username&#39;]; ?>">
<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 웹 개발자들에게 도움이 되기를 바랍니다.
위 내용은 PHP에서 클릭하여 수정 편집 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
