jQueryでページ全体をリロードせずにdivをリロードする方法

Jquerydepeji Quan Tiworirodosezunidivworirodosuru Fang Fa



1 つのサイトに複数の Web ページを作成する場合、データを複製する必要がある場合があります。たとえば、トリガーされたイベントで別の Web ページで同じデータを利用します。このような状況では、ページ全体をリロードせずに div をリロードすると、データを効果的に管理できるため、時間を節約できます。

このブログでは、JavaScript でページ全体をリロードせずに div をリロードする方法について説明します。

jQueryでページ全体をリロードせずにdivをリロードする方法は?

分周 」は、jQuery の「on()」メソッドと「 ロード() ' 方法。







on() メソッドは要素に 1 つ以上のイベント ハンドラーを関連付け、load() メソッドはフェッチされた要素にコンテンツをロードします。これらのメソッドを組み合わせて div にアクセスし、トリガーされたイベントで再読み込みすることができます。




次の HTML コードの概要を見てみましょう。



< >
< h2 > これは、ページ全体をリロードせずにdivをリロードする方法です h2 >
< 部門ID = 「マイディビジョン」 >
< p > JavaScript は関数を含むプログラミング言語です。 変数 イベントやオブジェなど p >
分周 >
< ボタン > リロード ボタン >
>

上記のコード ブロックでは:





  • 記載された見出しを含めます。
  • また、「id」属性を持つ「
    」要素を指定します。
  • その後、「

    」タグ内に段落を含め、目的の機能をトリガーするボタンを含めます。

それでは、JavaScript コードに移りましょう。

< スクリプトソース = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js' >
脚本 >
< 脚本 >
$ ( 'ボタン' ) . の上 ( 'クリック' 関数 ( ) {
$ ( 「#myDiv」 ) . ロード ( 「#myDiv」 )
アラート ( 「リロード」 )
} ) ;

このコード スニペットでは



  • ソース ' 属性。
  • 作成したボタンにアクセスし、「 の上() ' 方法。
  • これにより、添付イベントから明らかなように、ボタンのクリック時に前述の関数が呼び出されます。 クリック 」。
  • 関数定義で、含まれている「
    」要素を削除し、「 ロード() その「」を参照する方法 ID 」。
  • その結果、含まれている div がボタンのクリック時に再度リロードされ、アラート ダイアログ ボックスを介して指定されたメッセージが表示されます。

出力

ページ全体をリロードせずに div が正常にリロードされていることがわかります。

結論

ページ全体をリロードせずに div をリロードするには、「 の上() 」と組み合わせた方法 ロード() ' 方法。これらのメソッドを利用して、トリガーされたイベントにアクセスして再度参照することで、div のコンテンツをリロードできます。このブログでは、ページ全体をリロードせずに div をリロードする方法について説明しました。