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 サイトの他の関連記事を参照してください。