首頁 > 文章 > web前端 > 用jquery實現局部刷新td

用jquery實現局部刷新td

WBOY原創: 2023-05-23 21:35:07656瀏覽

在現代Web開發中，我們經常需要使用AJAX來更新部分頁面內容，而jQuery是一款非常流行的JavaScript庫，它提供了簡單的語法和豐富的功能，讓我們能夠更方便地實現局部重新整理.

本文將介紹如何使用jQuery實作局部刷新td，讓你的頁面更流暢、快速地回應使用者操作。

建立HTML頁面

首先，我們需要建立一個包含表格的HTML頁面，以便向使用者顯示需要更新的資料。

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

在這個頁面中，我們定義了一個包含三個資料行的表格，每一行包含一個ID和一個名稱，以及一個「更新」連結。資料行的ID資訊以data-id屬性保存，方便後續取得。

寫jQuery程式碼

接下來，我們需要寫一些jQuery程式碼來實作局部刷新。具體來說，我們需要：

監聽「更新」連結的點擊事件；
#取得需要更新的資料的ID;
發送AJAX請求以取得最新的資料；
更新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); // 更新名称字段
            }
        });
    });
});

在這段程式碼中，我們首先使用jQuery的closest函數找到「更新」連結所在的行，然後使用data函數來取得該行的ID資料。接著，我們使用ajax函數傳送一個GET請求到API位址，預期會取得最新的資料。當獲取成功後，我們使用find函數找到名稱字段，並使用text函數更新字段內容。

寫API程式碼

前面我們寫了jQuery程式碼，但還需要一個API來提供最新的資料。以下是一個簡單的Node.js Express應用程式範例，您可以根據您的需求進行修改。

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

在這個API中，我們只提供了一個簡單的GET請求處理程序，該程序接受一個ID參數，從數據數組中查找數據，並以JSON格式傳回結果。請注意，該API只是一個範例，您需要根據您的特定需求進行修改。

運行範例

現在，我們已經完成了jQuery程式碼和API程式碼的編寫。接下來，我們需要啟動服務並造訪HTML頁面。

首先，我們需要使用命令列進入專案目錄，然後啟動API服務：

node app.js

然後，我們在瀏覽器中開啟index.html文件，我們可以看到一個包含三個資料行的表格。當我們點擊「更新」連結時，jQuery程式碼將向API發送AJAX請求，並更新表格行中的名稱欄位。

總結

在這篇文章中，我們介紹如何使用jQuery實現局部刷新td，具體來說，我們創建了一個包含表格的HTML文件，並編寫了一些jQuery程式碼來實現更新。此外，我們還編寫了一個簡單的API，用於提供最新的資料。

jQuery是一款受歡迎的JavaScript函式庫，它提供了豐富的函式和語法，讓網頁開發更簡單。當您需要實現局部刷新時，它是一個很好的選擇。如果您還沒有使用它，請務必嘗試。

以上是用jquery實現局部刷新td的詳細內容。更多資訊請關注PHP中文網其他相關文章！

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

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：jquery 隱藏html元素下一篇：jquery 隱藏html元素

看更多