MENU
  1. ホーム
  2. JS
  3. jQuery
  4. AJAXリクエスト

AJAXリクエスト

jQuery
2024.05.18

ajaxメソッドは、非同期リクエストをサーバーに送信するために使用します。

ajax
記法

$.ajax({
　url: “URL”, // リクエスト先のURL
　type: “GET”, // リクエストのタイプ(GET, POSTなど)
　dataType: “json”, // 期待するレスポンスデータのタイプ
　success: function(response) {
　　// リクエストが成功した場合の処理
　},
　error: function(xhr, status, error) {
　　// リクエストが失敗した場合の処理
　}
});

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ajaxについて</title>
    <link rel="stylesheet" href="./main.css" />
  </head>
  <body>
    <div id="user-container">
      <div class="header">ユーザー情報</div>
      <p id="name">名前: <span id="user-name"></span></p>
      <p id="email">メール: <span id="user-email"></span></p>
      <img id="user-image" src="" alt="User Image" />
    </div>
    <button id="refresh-user">ユーザーを更新</button>

    <!-- CDN取得 -->
    <script src="CDNのURL"></script>
    <script src="./main.js"></script>
  </body>
</html>

// ページの読み込みが完了
$(function () {
  // ユーザー情報を更新する関数
  function refreshUser() {
    // AJAXリクエストを送信
    $.ajax({
      url: "https://randomuser.me/api/", // Random User APIのURL
      type: "GET", // リクエストのタイプ
      dataType: "json", // 期待するレスポンスデータのタイプ
      success: function (response) {
        // リクエストが成功した場合の処理
        var user = response.results[0];
        $("#user-name").text(user.name.first + " " + user.name.last);
        $("#user-email").text(user.email);
        $("#user-image").attr("src", user.picture.large);
      },
      error: function (xhr, status, error) {
        // リクエストが失敗した場合の処理
        $("#user-container").html("ユーザー情報の読み込みに失敗しました");
      },
    });
  }

  // 初回のユーザー情報更新
  refreshUser();

  // ボタンがクリックされたときにユーザー情報を更新
  $("#refresh-user").on("click", function () {
    refreshUser();
  });
});
#user-container {
  padding: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  margin-bottom: 10px;
  text-align: center;
}
.header {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}
#user-image {
  border-radius: 50%;
  margin-top: 10px;
}
#refresh-user {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
#refresh-user:hover {
  background-color: #0056b3;
}
出力結果
ユーザー情報

名前:

メール:

User Image
jQuery