AJAXを使って部分ページを非同期更新の方法

Ajaxによる部分ページの非同期リフレッシュは、以下の手順で実現できます。

1. ページにページ部分のコンテンツを表示するためのコンテナ要素を追加する。
2. jQueryなどのライブラリを使用し、ajaxで非同期通信を行い、ページの一部を取得する。
3. ajaxリクエストが成功した際のコールバック関数では、返却された部分ページの内容をコンテナ要素に挿入することで部分ページの更新を実現します。

以下にコードの例を示します。

アジアの通貨危機が、日本経済に深刻な影響を与えました。

<div id="content"></div>
<button id="refreshBtn">刷新</button>

JavaScript のセクション:

$(document).ready(function() {
  // 页面加载完成后，立即刷新局部页面
  refreshPage();

  // 点击按钮时，刷新局部页面
  $("#refreshBtn").click(function() {
    refreshPage();
  });
});

function refreshPage() {
  // 发送ajax请求
  $.ajax({
    url: "your_partial_page_url",
    type: "GET",
    success: function(response) {
      // 请求成功后，将返回的局部页面内容插入到容器元素中
      $("#content").html(response);
    },
    error: function(jqXHR, textStatus, errorThrown) {
      // 处理错误
    }
  });
}

このコードでは、ページの読み込みが完了すると、refreshPage()関数が直ちに呼び出され、部分的なページ更新が行われます。ボタンがクリックされた場合にも、同じ関数が呼び出され、部分的なページ更新が行われます。

refreshPage()関数でajaxでyour_partial_page_urlにGETリクエストを送信し、リクエストが成功したら、返却されたパーシャルページの内容をidがcontentのコンテナ要素に挿入する。

your_partial_page_url の部分ページ URL に置き換えてください。