Utilisez jquery pour implémenter un rafraîchissement partiel td-Questions et réponses frontales-php.cn

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

WBOY

Libérer： 2023-05-23 21:35:07

original

714 Les gens l'ont consulté

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>

Copier après la connexion

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

Copier après la connexion

Écrire le code 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'))

Copier après la connexion

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

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

Copier après la connexion

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!