pembangunan bahagian belakang
masalah PHP
Bagaimana untuk merealisasikan pengubahsuaian masa nyata jadual php html
Bagaimana untuk merealisasikan pengubahsuaian masa nyata jadual php html
Dalam pembangunan web, jadual ialah elemen yang sangat biasa digunakan. Dalam jadual, kita selalunya perlu mengubah suai data di dalamnya. Cara biasa ialah mengemas kini data melalui pemprosesan bahagian belakang. Tetapi jika kita mahu mengubah suai data jadual secara langsung dalam masa nyata di bahagian hadapan, bagaimana untuk mencapainya? Artikel ini akan memperkenalkan cara untuk merealisasikan pengubahsuaian masa nyata data jadual melalui teknologi AJAX dalam halaman PHP dan HTML.
1. Gambaran Keseluruhan
Dalam artikel ini, kami akan menggambarkannya melalui contoh pengubahsuaian masa nyata bagi bentuk mudah. Pertama, kita perlu menjana borang menggunakan kod PHP. Seperti yang ditunjukkan di bawah:
<!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
<meta charset="utf-8">
</head>
<body>
<?php
$data = array(
array("姓名","性别","年龄"),
array("张三","男","20"),
array("李四","女","22"),
array("王五","男","21")
);
?>
<table border="1" cellpadding="5">
<?php
foreach($data as $row) {
echo "<tr>";
foreach($row as $cell) {
echo "<td>$cell</td>";
}
echo "</tr>";
}
?>
</table>
</body>
</html>Kod di atas menjana jadual ringkas yang mengandungi maklumat nama, jantina dan umur empat orang. Dalam PHP, kita boleh menggunakan tatasusunan untuk mewakili data dalam jadual.
2. Ubah suai data jadual dalam masa nyata
Sekarang, apa yang ingin kami capai ialah mengubah suai data dalam jadual dalam masa nyata. Kita boleh mencapainya melalui langkah berikut:
- Tambah butang ubah suai pada jadual.
Dalam lajur terakhir data dalam setiap baris, tambahkan butang untuk mengubah suai data dalam baris itu. Gunakan kod berikut:
foreach($data as $row) {
echo "<tr>";
foreach($row as $i => $cell) {
if($i==count($row)-1) {
echo "<td><button onclick='editRow(event)'>修改</button></td>";
}
else {
echo "<td>$cell</td>";
}
}
echo "</tr>";
}Fungsi JavaScript editRow digunakan di sini untuk dipanggil apabila butang edit diklik.
- Tulis fungsi JavaScript
editRow.
Tambahkan kod JavaScript berikut pada halaman HTML:
<script>
function editRow(event) {
// 获取当前点击按钮所在行以及行内的数据
var row = event.target.parentNode.parentNode;
var cells = row.getElementsByTagName("td");
var data = [];
for(var i=0;i<cells.length-1;i++) {
data.push(cells[i].innerText);
}
// 将数据填入表单中
var form = "<form>";
form += "<input type='hidden' name='row' value='"+row.rowIndex+"'>";
form += "<input type='text' name='name' value='"+data[0]+"'>";
form += "<input type='text' name='gender' value='"+data[1]+"'>";
form += "<input type='text' name='age' value='"+data[2]+"'>";
form += "<button type='button' onclick='saveChanges(event)'>保存</button>";
form += "</form>";
// 将表单替换为数据输入框
row.innerHTML = form;
}
</script>Fungsi editRow ditakrifkan di sini Apabila butang ubah suai diklik, fungsi tersebut akan menukar data baris semasa Dipaparkan sebagai borang untuk kemudahan pengguna.
- Tulis fungsi JavaScript
saveChanges.
Selepas memasukkan data dalam borang, kami perlu menghantar data yang diubah suai ke pelayan melalui teknologi AJAX dan mengemas kini borang. Sekarang, kita perlu menulis fungsi JavaScript saveChanges yang akan menyimpan data yang diubah suai. Fungsi ini menggunakan kod berikut:
<script>
function saveChanges(event) {
// 获取当前修改的数据
var form = event.target.parentNode;
var rowIndex = form.row.value;
var name = form.name.value;
var gender = form.gender.value;
var age = form.age.value;
var data = "rowIndex="+rowIndex+"&name="+name+"&gender="+gender+"&age="+age;
// 发送 AJAX 请求
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState==4 && xmlhttp.status==200) {
// 更新表格数据
var row = form.parentNode;
row.innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("POST","update.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(data);
}
</script>Fungsi ini menghantar permintaan POST ke halaman XMLHttpRequest pelayan melalui objek update.php untuk mengendalikan operasi kemas kini data jadual. Selepas kemas kini data diproses di bahagian pelayan, data jadual baharu akan dikembalikan dan data jadual boleh diperoleh dan dikemas kini melalui xmlhttp.responseText.
- Tulis kod bahagian pelayan
Di bahagian pelayan, kita perlu menulis halaman update.php untuk mengendalikan operasi kemas kini data jadual. Kod halaman ini adalah seperti berikut:
<?php
// 获取 POST 数据
$rowIndex = $_POST["rowIndex"];
$name = $_POST["name"];
$gender = $_POST["gender"];
$age = $_POST["age"];
// 将新的数据返回给客户端
$data = array(
array("姓名","性别","年龄"),
array($name,$gender,$age)
);
$table = "<table border='1' cellpadding='5'>";
foreach($data as $row) {
$table .= "<tr>";
foreach($row as $cell) {
$table .= "<td>$cell</td>";
}
$table .= "</tr>";
}
$table .= "</table>";
echo $table;
?>Halaman ini menerima data diubah suai yang dihantar oleh pelanggan melalui POST, kemudian mengemas kini data dan mengembalikan data yang dikemas kini kepada pelanggan.
Kini, kami telah menyelesaikan proses pengubahsuaian masa nyata bagi keseluruhan borang. Buka halaman dalam penyemak imbas, klik butang ubah suai, masukkan data yang diubah suai dalam kotak input pop timbul, dan klik butang simpan untuk melihat kesan kemas kini data.
3. Ringkasan
Artikel ini memperkenalkan cara untuk merealisasikan pengubahsuaian masa nyata data jadual melalui teknologi AJAX dalam halaman PHP dan HTML. Antaranya, kami menggunakan PHP untuk menjana jadual ringkas, menggunakan JavaScript untuk melaksanakan pengubahsuaian masa nyata data jadual, dan menghantar data yang diubah suai kepada pelayan untuk diproses melalui AJAX. Kaedah ini boleh membantu kami mengendalikan data jadual dengan lebih mudah dan cepat. Walau bagaimanapun, perlu diingatkan bahawa dalam pembangunan sebenar, untuk memastikan keselamatan dan ketepatan data, kami perlu mengesahkan dan menapis data yang diterima dengan ketat untuk mengelakkan serangan berniat jahat dan salah operasi data.
Atas ialah kandungan terperinci Bagaimana untuk merealisasikan pengubahsuaian masa nyata jadual php html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1377
52
PHP 8 JIT (Just-in-Time) Penyusunan: Bagaimana ia meningkatkan prestasi.
Mar 25, 2025 am 10:37 AM
Kompilasi JIT Php 8 meningkatkan prestasi dengan menyusun kod yang sering dilaksanakan ke dalam kod mesin, memberi manfaat kepada aplikasi dengan pengiraan berat dan mengurangkan masa pelaksanaan.
PHP Secure File Muat naik: Mencegah kelemahan berkaitan fail.
Mar 26, 2025 pm 04:18 PM
Artikel ini membincangkan mendapatkan muat naik fail PHP untuk mengelakkan kelemahan seperti suntikan kod. Ia memberi tumpuan kepada pengesahan jenis fail, penyimpanan selamat, dan pengendalian ralat untuk meningkatkan keselamatan aplikasi.
OWASP Top 10 PHP: Huraikan dan mengurangkan kelemahan umum.
Mar 26, 2025 pm 04:13 PM
Artikel ini membincangkan kelemahan OWASP 10 dalam strategi PHP dan mitigasi. Isu -isu utama termasuk suntikan, pengesahan yang rosak, dan XSS, dengan alat yang disyorkan untuk memantau dan mendapatkan aplikasi PHP.
Penyulitan PHP: Penyulitan simetri vs asimetrik.
Mar 25, 2025 pm 03:12 PM
Artikel ini membincangkan penyulitan simetri dan asimetrik dalam PHP, membandingkan kesesuaian, prestasi, dan perbezaan keselamatan mereka. Penyulitan simetri lebih cepat dan sesuai untuk data pukal, manakala asimetrik digunakan untuk pertukaran utama yang selamat.
Pengesahan PHP & amp; Kebenaran: Pelaksanaan selamat.
Mar 25, 2025 pm 03:06 PM
Artikel ini membincangkan pelaksanaan pengesahan dan kebenaran yang mantap dalam PHP untuk mencegah akses yang tidak dibenarkan, memperincikan amalan terbaik dan mengesyorkan alat peningkatan keselamatan.
Bagaimana anda mengambil data dari pangkalan data menggunakan PHP?
Mar 20, 2025 pm 04:57 PM
Artikel membincangkan mendapatkan data dari pangkalan data menggunakan PHP, meliputi langkah, langkah keselamatan, teknik pengoptimuman, dan kesilapan umum dengan penyelesaian.
PHP API Kadar Mengehadkan: Strategi Pelaksanaan.
Mar 26, 2025 pm 04:16 PM
Artikel ini membincangkan strategi untuk melaksanakan kadar API yang mengehadkan PHP, termasuk algoritma seperti baldi token dan baldi bocor, dan menggunakan perpustakaan seperti simfoni/kadar-limiter. Ia juga meliputi pemantauan, had kadar penyesuaian secara dinamik, dan tangan
PHP CSRF Perlindungan: Bagaimana untuk mencegah serangan CSRF.
Mar 25, 2025 pm 03:05 PM
Artikel ini membincangkan strategi untuk mencegah serangan CSRF di PHP, termasuk menggunakan token CSRF, kuki tapak yang sama, dan pengurusan sesi yang betul.
