Maison > Article > interface Web > Utilisez jquery pour implémenter un rafraîchissement partiel td

Utilisez jquery pour implémenter un rafraîchissement partiel td

WBOYoriginal: 2023-05-23 21:35:07656parcourir

Dans le développement Web moderne, nous avons souvent besoin d'utiliser AJAX pour mettre à jour une partie du contenu de la page, et jQuery est une bibliothèque JavaScript très populaire. Elle fournit une syntaxe simple et des fonctions riches, nous permettant d'effectuer une actualisation partielle plus facilement.

Cet article expliquera comment utiliser jQuery pour implémenter une actualisation partielle td, afin que votre page puisse répondre aux opérations des utilisateurs plus facilement et plus rapidement.

Créer une page HTML

Tout d'abord, nous devons créer une page HTML contenant un tableau pour montrer à l'utilisateur les données qui doivent être mises à jour.

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

Dans cette page, nous définissons un tableau avec trois lignes de données, chaque ligne contient un identifiant et un nom, et un lien "Mettre à jour". Les informations d'identification de la ligne de données sont enregistrées dans l'attribut data-id pour faciliter l'acquisition ultérieure.

Écrire du code jQuery

Ensuite, nous devons écrire du code jQuery pour obtenir un rafraîchissement partiel. Plus précisément, nous devons :

Écouter l'événement de clic du lien "Mettre à jour" ;
Obtenir l'ID des données qui doivent être mises à jour ;
Envoyer une requête AJAX pour obtenir les dernières données ; le contenu td.

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

Écrire le code API

Nous avons écrit du code jQuery plus tôt, mais nous avons également besoin d'une API pour fournir les dernières données. Vous trouverez ci-dessous un exemple simple d'application Node.js Express que vous pouvez modifier en fonction de vos besoins.

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

Dans cette API, nous fournissons simplement un simple gestionnaire de requêtes GET qui accepte un paramètre ID, recherche les données du tableau de données et renvoie le résultat au format JSON. Veuillez noter que cette API n'est qu'un exemple et que vous devrez la modifier pour l'adapter à vos besoins spécifiques.

Exécution de l'exemple

Maintenant, nous avons fini d'écrire le code jQuery et le code API. Ensuite, nous devons démarrer le service et accéder à la page HTML.

Tout d'abord, nous devons utiliser la ligne de commande pour entrer dans le répertoire du projet, puis démarrer le service API :

node app.js

Ensuite, nous ouvrons le fichier index.html dans le navigateur, et nous pouvons voir un tableau contenant trois lignes de données . Lorsque nous cliquons sur le lien "Mettre à jour", le code jQuery enverra une requête AJAX à l'API et mettra à jour le champ de nom dans la ligne du tableau.

Résumé

Dans cet article, nous avons présenté comment utiliser jQuery pour implémenter un rafraîchissement partiel td. Plus précisément, nous avons créé un fichier HTML contenant une table et écrit du code jQuery pour implémenter la mise à jour. De plus, nous avons écrit une API simple pour fournir les dernières données.

jQuery est une bibliothèque JavaScript populaire qui fournit des fonctions et une syntaxe riches pour faciliter le développement Web. C'est un excellent choix lorsque vous devez implémenter une actualisation partielle. Si vous ne l'avez pas encore utilisé, assurez-vous de l'essayer.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

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

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：jquery masque les éléments HTMLArticle suivant：jquery masque les éléments HTML

Articles Liés

Voir plus