jQueryでAJAXを使う方法！非同期通信で画面の一部だけを更新する方法を解説

$.ajax({
  url: "・・・", // リクエスト先のURLを指定
  type: "GET", // リクエスト方法を指定（GET / POST）
  dataType: "json", // サーバーから返ってくるデータの型を指定
  data: { // サーバーに送るデータを指定（必要な場合）
    // key: value
  },
  success: function (data) { // 通信成功時の処理を指定
    // data → サーバーから返ってきたデータ（dataTypeに応じた形式で渡される）
  },
  error: function (xhr, status, error) { // 通信失敗時の処理を指定
    // xhr → jqXHRオブジェクト（statusでHTTPステータス等の確認ができる）
    // status → エラーの種類
    // error → 詳細なエラー内容（「Not Found」など）
  },
});

$(function () {
  let newsData = []; // 全ニュースデータ

  $.ajax({
    url: "news-list.json",
    type: "GET",
    dataType: "json",
    success: function (data) {
      newsData = data.news;
    },
    error: function (xhr, status, error) {
      console.error("JSONの読み込みに失敗しました:", error);
    },
  });
});

$(function () {
  let newsData = []; // 全ニュースデータ
  let currentIndex = 0; // 表示位置
  const perPage = 3; // 1回の表示件数

  $.ajax({
    url: "news-list.json",
    type: "GET",
    dataType: "json",
    success: function (data) {
      newsData = data.news;
    },
    error: function (xhr, status, error) {
      console.error("JSON の読み込みに失敗しました:", error);
    },
  });

  // ニュースを追加表示する関数
  function showMoreNews() {
    const nextItems = newsData.slice(currentIndex, currentIndex + perPage); // newsData（配列）から、currentIndexを開始位置として perPage（例：3件）を切り出して取得

    // 切り出したニュースデータを1件ずつ#news-wrap内に追加して表示
    nextItems.forEach((item) => {
      $("#news-wrap").append(`
        <div class="news-item">
          <p class="news-date">${item.date}</p>
          <p class="news-title">${item.title}</p>
          <p class="news-excerpt">${item.excerpt}</p>
        </div>
      `);
    });

    // 次回のcurrentIndex（表示開始位置）を更新（perPage分進める）
    currentIndex += perPage;

    // 全件表示したらボタンを隠す
    if (currentIndex >= newsData.length) {
      $("#load-more").hide();
    }
  }
});

$(function () {
  let newsData = []; // 全ニュースデータ
  let currentIndex = 0; // 表示位置
  const perPage = 3; // 1回の表示件数

  $.ajax({
    url: "news-list.json",
    type: "GET",
    dataType: "json",
    success: function (data) {
      newsData = data.news;

      showMoreNews();
    },
    error: function (xhr, status, error) {
      console.error("JSON の読み込みに失敗しました:", error);
    },
  });

  $("#load-more").on("click", function () {
    showMoreNews();
  });

  // ニュースを追加表示する関数
  function showMoreNews() {
    const nextItems = newsData.slice(currentIndex, currentIndex + perPage); // newsData（配列）から、currentIndexを開始位置として perPage（例：3件）を切り出して取得

    // 切り出したニュースデータを1件ずつ#news-wrap内に追加して表示
    nextItems.forEach((item) => {
      $("#news-wrap").append(`
        <div class="news-item">
          <p class="news-date">${item.date}</p>
          <p class="news-title">${item.title}</p>
          <p class="news-excerpt">${item.excerpt}</p>
        </div>
      `);
    });

    // 次回のcurrentIndex（表示開始位置）を更新（perPage分進める）
    currentIndex += perPage;

    // 全件表示したらボタンを隠す
    if (currentIndex >= newsData.length) {
      $("#load-more").hide();
    }
  }
});

<IfModule mod_headers.c>
  Header set Access-Control-Allow-Origin "http://localhost"
  Header set Access-Control-Allow-Methods "GET, POST, OPTIONS"
  Header set Access-Control-Allow-Headers "Content-Type"
</IfModule>

<?php
header("Content-Type: application/json; charset=utf-8");

$url = "https://example.com/news-list.json"; // 外部JSONファイルのURL

$response = file_get_contents($url);

echo $response;

$.ajax({
  url: "proxy.php",
  type: "GET",
  dataType: "json",
  success: function (data) {
    // 通信成功時の処理を指定
  },
  error: function () {
    // 通信失敗時の処理を指定
  },
});