Bagaimana untuk melaksanakan fungsi penyuntingan klik-untuk-ubah suai dalam php

Dengan pembangunan berterusan teknologi pembangunan web, semakin banyak aplikasi web perlu menyediakan pengguna hadapan dengan keupayaan untuk mengedit data secara langsung. Untuk mencapai matlamat ini, pembangun perlu belajar cara menggunakan PHP untuk menghantar permintaan yang berkaitan kepada pelayan untuk mengemas kini, memasukkan atau memadam data. Kaedah yang akan diperkenalkan oleh artikel ini ialah mengubah suai data secara terus dalam penyemak imbas dengan mengklik butang edit, tanpa perlu melompat atau memuat semula halaman.

Direktori

• Persediaan untuk mengubah suai data
• Menyedari pengeditan klik
• Pemprosesan mengubah suai data
• Kod lengkap

Persediaan untuk mengubah suai data

Sebelum bermula, anda perlu menentukan lokasi data yang perlu diedit pada pelayan. Sebagai contoh, jika anda perlu mengedit rekod dalam jadual bernama pengguna, anda boleh menggunakan kod berikut untuk menyambung ke pangkalan data dan menanyakan data:

// 连接数据库
$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();

Selepas mendapatkan data, anda perlu Render supaya ia boleh diedit oleh pengguna. Apa yang perlu diperhatikan di sini ialah kita perlu menambah elemen input untuk setiap medan yang perlu diedit, dan nilainya hendaklah nilai medan semasa. Pada masa yang sama, tambahkan butang "Sahkan" selepas setiap elemen input untuk membolehkan pengguna menyerahkan perubahan.

  ">   用户名：   ">   确认

Laksanakan klik untuk edit

Untuk pengguna mengklik butang edit, kita perlu menambah pautan "ubah suai" dan membuka borang edit apabila diklik. JavaScript digunakan di sini untuk melaksanakan fungsi ini.

Pertama, kita perlu menambah pendengar acara klik untuk pautan "Ubah suai" dan memanggil fungsi showEditor apabila pengguna mengklik:

<a>修改</a>

Seterusnya, kita perlu menentukan fungsi showEditor dan Cipta elemen borang untuk pengguna mengedit data:

function showEditor() {
  var form = document.createElement('form');
  form.method = 'post';
  form.action = 'update.php';
  form.innerHTML = `
    <input>">
    <label>用户名：</label>
    <input>">
    <button>确认</button>
  `;
  document.body.appendChild(form);
}

Apa yang perlu diperhatikan di sini ialah selepas kita mencipta elemen borang, kita juga perlu menambahkannya ke halaman (di sini ia ditambah kepada elemen badan ) untuk memastikan pengguna dapat melihat dan mengedit kandungannya.

Pemprosesan data yang diubah suai

Selepas pengguna mengklik butang "Sahkan", data borang akan diserahkan kepada fail kemas kini.php pelayan untuk operasi kemas kini data. Di sini kita perlu mendapatkan data borang terlebih dahulu dan menggunakan PDO untuk melaksanakan pernyataan kemas kini:

// 连接数据库
$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]);

Selepas melengkapkan kemas kini data, kami boleh mengubah hala pengguna ke halaman lain mengikut keperluan, atau memaparkan "Ubah suai" dalam gesaan Success" halaman semasa.

echo '修改成功！';

Kod penuh

Kod sampel adalah seperti berikut:

prepare('SELECT * FROM users WHERE id = ?');
$stmt->execute([$id]);
$user = $stmt->fetch();
?>
<a>修改</a>

<script>
// showEditor 函数
function showEditor() {
  var form = document.createElement(&#39;form&#39;);
  form.method = &#39;post&#39;;
  form.action = &#39;update.php&#39;;
  form.innerHTML = `
    <input type="hidden" name="id" value="<?php echo $user[&#39;id&#39;]; ?>">
    <label>用户名：
    <input type="text" name="username" value="<?php echo $user[&#39;username&#39;]; ?>">
    <button type="submit">确认
  `;
  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 '修改成功！';
?>

Dalam artikel ini, kami belajar cara mengedit butang edit terus dalam pelayar Ubah suai data dalam. Perlu diingatkan bahawa untuk memastikan keselamatan data, kami perlu menambah beberapa logik pengesahan yang diperlukan pada kod untuk mengelakkan risiko keselamatan yang tidak perlu. Akhir sekali, saya harap artikel ini dapat membantu pembangun web PHP.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi penyuntingan klik-untuk-ubah suai dalam php. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!