Rumah > Artikel > hujung hadapan web > Gunakan jquery untuk melaksanakan muat semula separa td
Gunakan jquery untuk melaksanakan muat semula separa td
- WBOYasal
- 2023-05-23 21:35:07656semak imbas
Dalam pembangunan web moden, kami selalunya perlu menggunakan AJAX untuk mengemas kini sebahagian daripada kandungan halaman, dan jQuery ialah perpustakaan JavaScript yang sangat popular Ia menyediakan sintaks mudah dan fungsi yang kaya, membolehkan kami melaksanakan penyegaran separa dengan lebih mudah.
Artikel ini akan memperkenalkan cara menggunakan jQuery untuk melaksanakan muat semula separa td, supaya halaman anda boleh bertindak balas terhadap operasi pengguna dengan lebih lancar dan cepat.
- Buat halaman HTML
Pertama, kita perlu mencipta halaman HTML yang mengandungi jadual untuk menunjukkan kepada pengguna data yang perlu dikemas kini.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>局部刷新td</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<table>
<thead>
<tr>
<th>ID</th>
<th>名称</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr data-id="1">
<td class="id">1</td>
<td class="name">Apple</td>
<td><a href="#" class="update">更新</a></td>
</tr>
<tr data-id="2">
<td class="id">2</td>
<td class="name">Banana</td>
<td><a href="#" class="update">更新</a></td>
</tr>
<tr data-id="3">
<td class="id">3</td>
<td class="name">Cherry</td>
<td><a href="#" class="update">更新</a></td>
</tr>
</tbody>
</table>
</body>
</html>Dalam halaman ini, kami mentakrifkan jadual dengan tiga baris data, setiap baris mengandungi ID dan nama serta pautan "Kemas Kini". Maklumat ID bagi baris data disimpan dalam atribut data-id untuk pemerolehan seterusnya yang mudah.
- Tulis kod jQuery
Seterusnya, kita perlu menulis beberapa kod jQuery untuk melaksanakan muat semula separa. Khususnya, kita perlu:
- Mendengar acara klik pautan "Kemas Kini";
- Dapatkan ID data yang perlu dikemas kini; >Hantar permintaan AJAX untuk mendapatkan Data terkini;
$(function() { $('a.update').click(function(e) { e.preventDefault(); var row = $(this).closest('tr'); var id = row.data('id'); $.ajax({ url: '/api/data/' + id, // 这里是获取最新数据的API地址，根据需求修改 dataType: 'json', success: function(data) { row.find('.name').text(data.name); // 更新名称字段 } }); }); });Dalam kod ini, kami mula-mula menggunakan fungsi terdekat jQuery untuk mencari baris di mana pautan "kemas kini" terletak, dan kemudian menggunakan fungsi data untuk mendapatkan data ID baris tersebut. Seterusnya, kami menggunakan fungsi ajax untuk menghantar permintaan GET ke alamat API, mengharapkan untuk mendapatkan data terkini. Apabila pemerolehan berjaya, kami menggunakan fungsi cari untuk mencari medan nama dan menggunakan fungsi teks untuk mengemas kini kandungan medan.
- Kami menulis kod jQuery lebih awal, tetapi kami juga memerlukan API untuk menyediakan data terkini. Di bawah ialah contoh aplikasi mudah Node.js Express yang boleh anda ubah suai untuk memenuhi keperluan anda.
const express = require('express') const app = express() const data = [ { id: 1, name: 'Apple' }, { id: 2, name: 'Banana' }, { id: 3, name: 'Cherry' } ] app.get('/api/data/:id', (req, res) => { const id = req.params.id const item = data.find(item => item.id == id) res.json(item) }) app.listen(3000, () => console.log('Server started on port 3000'))Dalam API ini, kami hanya menyediakan pengendali permintaan GET ringkas yang menerima parameter ID, mencari data daripada tatasusunan data dan mengembalikan hasil dalam format JSON. Sila ambil perhatian bahawa API ini hanyalah satu contoh dan anda perlu mengubah suainya untuk memenuhi keperluan khusus anda.
- Sekarang, kami telah selesai menulis kod jQuery dan kod API. Seterusnya, kita perlu memulakan perkhidmatan dan mengakses halaman HTML.
- Pertama, kita perlu menggunakan baris arahan untuk memasuki direktori projek, dan kemudian mulakan perkhidmatan API:
node app.js
Kemudian, kita membuka fail index.html dalam penyemak imbas, kita boleh lihat fail yang mengandungi tiga Jadual baris data. Apabila kami mengklik pautan "Kemas kini", kod jQuery akan menghantar permintaan AJAX kepada API dan mengemas kini medan nama dalam baris jadual.
Ringkasan- Dalam artikel ini, kami memperkenalkan cara menggunakan jQuery untuk melaksanakan penyegaran separa td Secara khusus, kami mencipta fail HTML yang mengandungi jadual, Dan menulis beberapa jQuery kod untuk melaksanakan kemas kini. Selain itu, kami telah menulis API mudah untuk menyediakan data terkini.
- jQuery ialah perpustakaan JavaScript popular yang menyediakan fungsi dan sintaks yang kaya untuk memudahkan pembangunan web. Ia merupakan pilihan yang bagus apabila anda perlu melaksanakan muat semula separa. Jika anda belum menggunakannya, pastikan anda mencubanya.
Atas ialah kandungan terperinci Gunakan jquery untuk melaksanakan muat semula separa td. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!