php怎麼實作點擊修改編輯功能

隨著 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[&#39;id&#39;]; ?>">
  <label>用户名：</label>
  <input type="text" name="username" value="<?php echo $user[&#39;username&#39;]; ?>">
  <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[&#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);
}

這裡需要注意的是，我們在建立表單元素後，還需要將其新增至頁面（這裡是新增至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 = `
    &lt;input type=&quot;hidden&quot; name=&quot;id&quot; value=&quot;&lt;?php echo $user[&amp;#39;id&amp;#39;]; ?&gt;&quot;&gt;
    &lt;label&gt;用户名：&lt;/label&gt;
    &lt;input type=&quot;text&quot; name=&quot;username&quot; value=&quot;&lt;?php echo $user[&amp;#39;username&amp;#39;]; ?&gt;&quot;&gt;
    &lt;button type=&quot;submit&quot;&gt;确认&lt;/button&gt;
  `;
  document.body.appendChild(form);
}
</script>

<!-- update.php -->
<?php
// 连接数据库
$pdo = new PDO(&#39;mysql:host=localhost;dbname=test&#39;, &#39;username&#39;, &#39;password&#39;);

// 获取表单数据
$id = $_POST[&#39;id&#39;];
$username = $_POST[&#39;username&#39;];

// 更新用户数据
$stmt = $pdo->prepare('UPDATE users SET username = ? WHERE id = ?');
$stmt->execute([$username, $id]);

// 显示成功消息
echo '修改成功！';
?>

#在本文中，我們學習如何透過點擊編輯按鈕，直接在瀏覽器中修改資料。需要注意的是，為了確保資料的安全性，我們需要在程式碼中加入一些必要的驗證邏輯，以避免不必要的安全風險。最後，希望本文能對 PHP Web 開發者們有幫助。

以上是php怎麼實作點擊修改編輯功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！