Verwenden Sie jquery, um einen Teilaktualisierungs-TD zu implementieren-Front-End-Fragen und Antworten-php.cn

Verwenden Sie jquery, um einen Teilaktualisierungs-TD zu implementieren

WBOY

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

Original

716 Leute haben es durchsucht

In der modernen Webentwicklung müssen wir häufig AJAX verwenden, um einen Teil des Seiteninhalts zu aktualisieren, und jQuery ist eine sehr beliebte JavaScript-Bibliothek. Sie bietet eine einfache Syntax und umfangreiche Funktionen, sodass wir eine teilweise Aktualisierung bequemer erreichen können.

In diesem Artikel erfahren Sie, wie Sie mit jQuery eine teilweise Aktualisierung von td implementieren, damit Ihre Seite reibungsloser und schneller auf Benutzervorgänge reagieren kann.

HTML-Seite erstellen

Zuerst müssen wir eine HTML-Seite erstellen, die eine Tabelle enthält, um dem Benutzer die Daten anzuzeigen, die aktualisiert werden müssen.

<!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>

Nach dem Login kopieren

Auf dieser Seite definieren wir eine Tabelle mit drei Datenzeilen. Jede Zeile enthält eine ID und einen Namen sowie einen Link „Aktualisieren“. Die ID-Informationen der Datenzeile werden zur späteren einfachen Erfassung im Attribut data-id gespeichert.

JQuery-Code schreiben

Als nächstes müssen wir etwas jQuery-Code schreiben, um eine teilweise Aktualisierung zu erreichen. Konkret müssen wir:

Das Klickereignis des „Aktualisieren“-Links abhören;
Eine AJAX-Anfrage senden, um die neuesten Daten zu erhalten; der td-Inhalt.

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

Nach dem Login kopieren

API-Code schreiben

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

Nach dem Login kopieren

Ausführen des Beispiels

node app.js

Nach dem Login kopieren

Dann öffnen wir die Datei index.html im Browser und sehen eine Tabelle mit drei Datenzeilen . Wenn wir auf den Link „Aktualisieren“ klicken, sendet der jQuery-Code eine AJAX-Anfrage an die API und aktualisiert das Namensfeld in der Tabellenzeile.

Zusammenfassung

jQuery ist eine beliebte JavaScript-Bibliothek, die umfangreiche Funktionen und Syntax bietet, um die Webentwicklung zu vereinfachen. Dies ist eine gute Wahl, wenn Sie eine teilweise Aktualisierung implementieren müssen. Wenn Sie es noch nicht verwendet haben, probieren Sie es unbedingt aus.

Das obige ist der detaillierte Inhalt vonVerwenden Sie jquery, um einen Teilaktualisierungs-TD zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!