フロントエンド開発者必見！jQueryでPUT/DELETEリクエストを送信する方法

2024-04-02

jQueryでPUT/DELETEリクエストを送信する方法

PUTリクエストは、サーバー上のリソースを更新するために使用されます。

コード例

$.ajax({
  url: "/api/resource/1",
  type: "PUT",
  data: {
    name: "新しい名前",
    description: "新しい説明"
  },
  success: function(data) {
    // リソースが更新されたことを処理
  },
  error: function(jqXHR, textStatus, errorThrown) {
    // エラー処理
  }
});

$.ajax({
  url: "/api/resource/1",
  type: "DELETE",
  success: function(data) {
    // リソースが削除されたことを処理
  },
  error: function(jqXHR, textStatus, errorThrown) {
    // エラー処理
  }
});

オプション

上記以外にも、$.ajax() メソッドには様々なオプションがあります。

dataType: サーバーからのデータ形式を指定します。
headers: リクエストヘッダーを設定します。

詳細は jQuery $.ajax() メソッド: https://api.jquery.com/jquery.ajax/ を参照してください。

注意点

多くのブラウザは、PUT/DELETEリクエストに対して警告を表示します。ユーザーに確認するなど、適切な処理が必要です。

HTML

<button id="update-button">更新</button>
<button id="delete-button">削除</button>

JavaScript

$(document).ready(function() {
  $("#update-button").click(function() {
    $.ajax({
      url: "/api/resource/1",
      type: "PUT",
      data: {
        name: "新しい名前",
        description: "新しい説明"
      },
      success: function(data) {
        // リソースが更新されたことを処理
        alert("リソースが更新されました");
      },
      error: function(jqXHR, textStatus, errorThrown) {
        // エラー処理
        alert("エラーが発生しました: " + errorThrown);
      }
    });
  });

  $("#delete-button").click(function() {
    $.ajax({
      url: "/api/resource/1",
      type: "DELETE",
      success: function(data) {
        // リソースが削除されたことを処理
        alert("リソースが削除されました");
      },
      error: function(jqXHR, textStatus, errorThrown) {
        // エラー処理
        alert("エラーが発生しました: " + errorThrown);
      }
    });
  });
});

このコードは、#update-button と #delete-button クリック時に、それぞれPUTリクエストとDELETEリクエストを送信します。

実行

このコードをHTMLファイルに保存し、ブラウザで開きます。

#update-button をクリックすると、サーバー上のリソースが更新されます。

このコードはサンプルです。実際の使用には、必要に応じて修正してください。

PUT/DELETEリクエストを送信する他の方法

XMLHttpRequestは、JavaScriptでHTTPリクエストを送信する標準的な方法です。

var xhr = new XMLHttpRequest();
xhr.open("PUT", "/api/resource/1");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify({
  name: "新しい名前",
  description: "新しい説明"
}));

xhr.onload = function() {
  if (xhr.status === 200) {
    // リソースが更新されたことを処理
  } else {
    // エラー処理
  }
};

Fetch APIは、XMLHttpRequestよりも新しいAPIで、より簡単にHTTPリクエストを送信できます。

fetch("/api/resource/1", {
  method: "PUT",
  body: JSON.stringify({
    name: "新しい名前",
    description: "新しい説明"
  })
})
.then(function(response) {
  if (response.status === 200) {
    // リソースが更新されたことを処理
  } else {
    // エラー処理
  }
});

Axiosは、PromiseベースのHTTPライブラリです。

axios.put("/api/resource/1", {
  name: "新しい名前",
  description: "新しい説明"
})
.then(function(response) {
  // リソースが更新されたことを処理
})
.catch(function(error) {
  // エラー処理
});