jqueryを使用して部分リフレッシュtdを実装する
現代の 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); // 更新名称字段 } }); }); });
ログイン後にコピーこのコードでは、まず jQuery の最も近い関数を使用して「更新」リンクが配置されている行を検索し、次に data 関数を使用して行の ID データを取得します。次に、ajax 関数を使用して API アドレスに GET リクエストを送信し、最新のデータを取得します。取得が成功したら、find 関数を使用して name フィールドを検索し、text 関数を使用してフィールドの内容を更新します。
- 先ほど 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 サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











この記事では、functionコンポーネントでのデータフェッチやDOM操作などの副作用を管理するためのフックであるReactの使用Effectについて説明します。メモリリークなどの問題を防ぐための使用、一般的な副作用、およびクリーンアップについて説明します。

怠zyな読み込みは、必要になるまでコンテンツの読み込みを遅延させ、初期負荷時間とサーバーの負荷を削減することにより、Webパフォーマンスとユーザーエクスペリエンスを改善します。

JavaScriptの高次関数は、抽象化、共通パターン、および最適化技術を通じて、コードの簡潔さ、再利用性、モジュール性、およびパフォーマンスを強化します。

この記事では、JavaScriptのカレーについて説明します。これは、マルチアーグメント関数を単一argument関数シーケンスに変換する手法です。 Curryingの実装、部分的なアプリケーションなどの利点、実用的な用途、コード読み取りの強化を調査します

この記事では、Virtual DOMツリーを比較してDOMを効率的に更新するReactの調整アルゴリズムについて説明します。パフォーマンスの利点、最適化技術、ユーザーエクスペリエンスへの影響について説明します。

この記事では、ReactのUseContextを説明しています。これにより、小道具掘削を避けることで国家管理を簡素化します。再レンダーの削減により、集中状態やパフォーマンスの改善などの利点について説明します。

記事では、PreventDefault()メソッドを使用して、イベントハンドラーのデフォルト動作の防止、ユーザーエクスペリエンスの強化などの利点、およびアクセシビリティの懸念などの潜在的な問題について説明します。

この記事では、予測可能性、パフォーマンス、ユースケースなどの側面に焦点を当てた、Reactの制御されていないコンポーネントと制御されていないコンポーネントの利点と欠点について説明します。それらを選択する際に考慮することを要因についてアドバイスします。
