ボタンのクリック時に jQuery と Ajax を使用して Div のコンテンツをリロードするにはどうすればよいですか?

jQuery と Ajax を使用して Div コンテンツをリロード

問題:

をリロードする必要がありますページ全体を更新せずにボタンをクリックすると、特定の div のコンテンツが表示されます。

コード サンプル:

<code class="html"><div role="button" class="marginTop50 marginBottom">
  <input type="button" id="getCameraSerialNumbers" value="Capture Again" class="disabled" />
  <input type="button" id="confirmNext" value="Confirm & Proceed" class="disabled marginLeft50" />
</div>

<div id="list">
  <!-- Content to be reloaded -->
</div></code>

間違ったアプローチ:

<code class="javascript">$("#getCameraSerialNumbers").click(function () {
  $("#step1Content").load();
});</code>

load() メソッドにはコンテンツをロードするための URL が必要であるため、このコードは正しくありません。

解決策:

jQuery のload( ) メソッドを URL とともに使用して、リモート コンテンツをロードできます。ただし、現在のページからコンテンツをリロードするには、次のアプローチを使用できます:

1. ハッシュ付きの絶対 URL を使用する:

<code class="javascript">$("#list").load(location.href + " #list");</code>

これにより、現在の URL から ID「list」を持つ要素のコンテンツがロードされます。 2 番目の「#」記号の前のスペースに注意してください。

2. Ajax を使用する:

もう 1 つの方法は、Ajax を使用することです。このアプローチでは、サーバーに Ajax リクエストを送信し、コンテンツを取得し、div を更新します。

<code class="javascript">$("#getCameraSerialNumbers").click(function () {
  $.ajax({
    url: "YOUR_ENDPOINT_URL",
    success: function (data) {
      $("#list").html(data);
    },
  });
});</code>

この場合、「YOUR_ENDPOINT_URL」は、ロードされるコンテンツを返すサーバー エンドポイントです。

追加の注意事項:

1. コンテンツをリロードする前に、[再度キャプチャ] ボタンが有効になっていることを確認してください。
2. Ajax アプローチを使用している場合は、サーバー エンドポイントがコンテンツを適切な形式 (HTML または JSON) で返すようにしてください。

以上がボタンのクリック時に jQuery と Ajax を使用して Div のコンテンツをリロードするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。