Gunakan jquery untuk melaksanakan muat semula separa td-Soal Jawab bahagian hadapan-php.cn

Gunakan jquery untuk melaksanakan muat semula separa td

WBOY

Lepaskan： 2023-05-23 21:35:07

asal

728 orang telah melayarinya

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>

Salin selepas log masuk

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); // 更新名称字段
            }
        });
    });
});

Salin selepas log masuk

Tulis kod API

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'))

Salin selepas log masuk

Jalankan contoh

node app.js

Salin selepas log masuk

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

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!