ホームページ > 記事 > ウェブフロントエンド > jqueryを使用して部分リフレッシュtdを実装する

jqueryを使用して部分リフレッシュtdを実装する

WBOYオリジナル: 2023-05-23 21:35:07656ブラウズ

現代の Web 開発では、ページコンテンツの一部を更新するために AJAX を使用する必要がよくありますが、jQuery は非常に人気のある JavaScript ライブラリです。jQuery はシンプルな構文と豊富な機能を提供し、部分的なコンテンツをより便利に実装できます。

この記事では、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>

このページでは、3 つのデータ行を含むテーブルを定義します。各行には 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); // 更新名称字段
            }
        });
    });
});

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 では、ID パラメーターを受け入れ、データ配列からデータを検索し、結果を JSON 形式で返す単純な GET リクエストハンドラーのみを提供します。この API は単なる例であり、特定のニーズに合わせて変更する必要があることに注意してください。

サンプルの実行

これで、jQuery コードと API コードの作成が完了しました。次に、サービスを開始して HTML ページにアクセスする必要があります。

まず、コマンドラインを使用してプロジェクトディレクトリに入り、API サービスを開始する必要があります。

node app.js

次に、ブラウザでindex.html ファイルを開きます。データ行の 3 つのテーブルを含むファイルを参照してください。「更新」リンクをクリックすると、jQuery コードが AJAX リクエストを API に送信し、テーブル行の名前フィールドを更新します。

概要

この記事では、jQuery を使用して部分更新 TD を実装する方法を紹介しました。具体的には、テーブルを含む HTML ファイルを作成し、いくつかの jQuery を記述しました。更新を実装するコード。さらに、最新のデータを提供するためのシンプルな API を作成しました。

jQuery は、Web 開発を容易にする豊富な機能と構文を提供する人気のある JavaScript ライブラリです。部分的なリフレッシュを実装する必要がある場合に最適です。まだ使ったことがない方はぜひ試してみてください。

以上がjqueryを使用して部分リフレッシュtdを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：jqueryはHTML要素を非表示にします次の記事：jqueryはHTML要素を非表示にします

続きを見る