PHPでクリックして変更編集機能を実装する方法
- PHPzオリジナル
- 2023-04-04 17:28:241361ブラウズ
Web 開発テクノロジーの継続的な発展に伴い、フロントエンド ユーザーにデータを直接編集する機能を提供する必要のある 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();
データを取得した後、それを次の場所に追加する必要があります。ユーザー編集用にレンダリングされたページ。ここで注意する必要があるのは、編集する必要があるフィールドごとに入力要素を追加する必要があり、その値が現在のフィールドの値である必要があるということです。同時に、各入力要素の後に「確認」ボタンを追加して、ユーザーが変更を送信できるようにします。
<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);
}
ここで注意する必要があるのは、フォーム要素を作成した後、それをページ (ここでは 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 '修改成功！';
完全なコード
サンプル コードは次のとおりです:
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 Web 開発者に役立つことを願っています。
以上がPHPでクリックして変更編集機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。