Heim > Artikel > Web-Frontend > Verwenden Sie jquery, um einen Teilaktualisierungs-TD zu implementieren

Verwenden Sie jquery, um einen Teilaktualisierungs-TD zu implementieren

WBOYOriginal: 2023-05-23 21:35:07656Durchsuche

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>

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

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

Ausführen des Beispiels

Zuerst müssen wir über die Befehlszeile das Projektverzeichnis aufrufen und dann den API-Dienst starten:

node app.js

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!

JavaScript node.js json jquery ajax html express JS 事件 td

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：jquery verbirgt HTML-ElementeNächster Artikel：jquery verbirgt HTML-Elemente

In Verbindung stehende Artikel

Mehr sehen