How to send a PUT/DELETE request in jQuery ?

Last Updated : 01 Jul, 2024

To send PUT/DELETE requests in jQuery, use the .ajax() method, specifying the type as PUT or DELETE. This enables updating or deleting server resources via AJAX. Unlike .get() and .post(), jQuery lacks dedicated .put() and .delete() methods.

Approach

To make a PUT or DELETE requests in jQuery we can use the .ajax() method itself. We can specify the type of request to be put or deleted according to the requirement as given in the example below.
We will create a code example in which we will create two buttons that are going to make PUT and DELETE requests to an unknown server.
We are going to see from the Network tab of the Chrome Developer tools whether the requests are working or not.
We will create a file called test.html with a simple text GeeksforGeeks to which we are going to make the AJAX request and our main file is going to be index.html.
When we click on any of the two buttons a new name will appear in the Network tab, we can click on it to see the type of the request in the Request Method option.
We need to run this in a server, in the screenshots PHP server is being used.
To open the Dev tools, Press Ctrl + Shift + I. Click on the Networks tab.

Example: The example below shows the above explained approach.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
          "width=device-width, initial-scale=1.0">
  
    <!-- Importing the jQuery -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
      </script>
</head>

<script>
    function makePUTrequest() {
        $.ajax({
            url: 'test.html',
            type: 'PUT',
            success: function (result) {
                // Do something with the result
            }
        });
    }

    function makeDELETErequest() {
        $.ajax({
            url: 'test.html',
            type: 'DELETE',
            success: function (result) {
                // Do something with the result
            }
        });
    }
</script>

<body>
    <button onclick="makePUTrequest()">
        Click for PUT request
    </button>
    <button onclick="makeDELETErequest()">
        Click for DELETE request
    </button>
</body>

</html>