How to send a PUT/DELETE request in jQuery?

Question

GET:$.get(..)

POST:$.post()..

What about PUT/DELETE?

Better that we need loading as well – mercury Jun 18 '18 at 23:04 — mercury, Jun 18 '18 at 23:04

score 990 · Accepted Answer · answered Jan 28 '10 at 10:58

990

You could use the ajax method:

$.ajax({
    url: '/script.cgi',
    type: 'DELETE',
    success: function(result) {
        // Do something with the result
    }
});

answered Jan 28 '10 at 10:58

Darin Dimitrov

994,864
265
3,241
2,902

69

Just a note, if you're using an IIS webserver and the jquery `PUT` or `DELETE` requests are returning 404 errors, you will need to enable these verbs in IIS. I've found this to be a good resource: http://geekswithblogs.net/michelotti/archive/2011/05/28/resolve-404-in-iis-express-for-put-and-delete-verbs.aspx – TimDog Jan 12 '12 at 21:03
22

BE AWARE: `"The type of request to make ("POST" or "GET"), default is "GET". Note: Other HTTP request methods, such as PUT and DELETE, can also be used here, but they are not supported by all browsers."` from: http://api.jquery.com/jQuery.ajax/#options – andilabs Dec 02 '13 at 08:11
24

@andi As per http://stackoverflow.com/questions/1757187/which-browsers-dont-support-a-http-delete-with-jquery-ajax any browser from IE6 on supports these http methods. Unless you're developing for an *ancient* browser, you can safely use http methods beyond "GET" and "POST". – Martin May 06 '15 at 18:51
2

Also, [you can't pass in form data](http://stackoverflow.com/questions/15088955/how-to-pass-data-in-the-ajax-delete-request-other-than-headers). It has to go through the URI. – xavier Jun 29 '15 at 19:59
6

for versions after 1.9 you can use `method` or `type` – sites Aug 23 '15 at 04:09
just inlining @xavier's note regarding passing data via URI, you would have to specify the data as query-string like so `url: urlCall + '?' + $.param({"Id": Id, "bolDeleteReq" : bolDeleteReq})` (see the link in his comment for the full example). – chamberlainpi Feb 10 '17 at 02:31

Jacob Relkin · Answer 2 · 2012-10-04T09:35:18.110

131

$.ajax will work.

$.ajax({
   url: 'script.php',
   type: 'PUT',
   success: function(response) {
     //...
   }
});

edited Oct 04 '12 at 09:35

answered Jan 28 '10 at 10:58

Jacob Relkin

156,685
31
339
316

4

PUT is need `contentType: "application/json"` – KingRider Jul 22 '16 at 13:45
3

Is there any difference between this answer and Darin Dimitrov's? I assume they were both created at the same time, and therefore there wasn't any plagiarism, but I don't see what this answer adds (apart from 940 reputation to Jacob). – Andrew Grimm Feb 16 '17 at 05:06

score 75 · Answer 3 · answered Apr 01 '14 at 13:03

75

We can extend jQuery to make shortcuts for PUT and DELETE:

jQuery.each( [ "put", "delete" ], function( i, method ) {
  jQuery[ method ] = function( url, data, callback, type ) {
    if ( jQuery.isFunction( data ) ) {
      type = type || callback;
      callback = data;
      data = undefined;
    }

    return jQuery.ajax({
      url: url,
      type: method,
      dataType: type,
      data: data,
      success: callback
    });
  };
});

and now you can use:

$.put('http://stackoverflow.com/posts/22786755/edit', {text:'new text'}, function(result){
   console.log(result);
})

copy from here

answered Apr 01 '14 at 13:03

Stepan Suvorov

23,436
25
100
172

Delete doesn't expect *data* while put does, not to say that $.get and $.post can have different signatures while here you are hardcoding it to one – Francisco Presencia Aug 30 '16 at 11:33
1

@FranciscoPresencia - 1. Delete doesn't expect data while put does ----> The third line handles this scenario 2. $.get and $.post can have different signatures ----> This is only creating additional jquery methods for delete and put. get and post have their own jquery methods. – Mahesh Jan 10 '18 at 03:02

score 30 · Answer 4 · edited May 23 '17 at 11:33

30

Seems to be possible with JQuery's ajax function by specifying

type: "put" or type: "delete"

and is not not supported by all browsers, but most of them.

Check out this question for more info on compatibility:

Are the PUT, DELETE, HEAD, etc methods available in most web browsers?

edited May 23 '17 at 11:33

Community

1
1

answered Jan 28 '10 at 10:58

Pekka

431,103
135
960
1,075

user2503775 · Answer 5 · 2013-10-28T09:18:31.673

From here, you can do this:

/* Extend jQuery with functions for PUT and DELETE requests. */

function _ajax_request(url, data, callback, type, method) {
    if (jQuery.isFunction(data)) {
        callback = data;
        data = {};
    }
    return jQuery.ajax({
        type: method,
        url: url,
        data: data,
        success: callback,
        dataType: type
        });
}

jQuery.extend({
    put: function(url, data, callback, type) {
        return _ajax_request(url, data, callback, type, 'PUT');
    },
    delete_: function(url, data, callback, type) {
        return _ajax_request(url, data, callback, type, 'DELETE');
    }
});

It's basically just a copy of $.post() with the method parameter adapted.

score 9 · Answer 6 · answered Feb 05 '17 at 17:40

Here's an updated ajax call for when you are using JSON with jQuery > 1.9:

$.ajax({
    url: '/v1/object/3.json',
    method: 'DELETE',
    contentType: 'application/json',
    success: function(result) {
        // handle success
    },
    error: function(request,msg,error) {
        // handle failure
    }
});

score 5 · Answer 7 · answered Jan 28 '10 at 10:59

5

You should be able to use jQuery.ajax :

Load a remote page using an HTTP request.

And you can specify which method should be used, with the type option :

The type of request to make ("POST" or "GET"), default is "GET".
Note: Other HTTP request methods, such as PUT and DELETE, can also be used here, but they are not supported by all browsers.

answered Jan 28 '10 at 10:59

Pascal MARTIN

385,748
76
642
654

4

do you know which browsers do not support `PUT` or `DELETE`? – Lea Hayes Aug 10 '11 at 19:55
5

Broken ones, if they're not capable of HTTP :^) – XTL Jun 15 '12 at 12:08

score 4 · Answer 8 · answered Jan 28 '10 at 10:58

4

ajax()

look for param type

Other HTTP request methods, such as PUT and DELETE, can also be used here, but they are not supported by all browsers.

answered Jan 28 '10 at 10:58

antpaw

14,544
11
55
86

score 3 · Answer 9 · edited May 04 '18 at 09:49

3

For brevity:

$.delete = function(url, data, callback, type){

  if ( $.isFunction(data) ){
    type = type || callback,
    callback = data,
    data = {}
  }

  return $.ajax({
    url: url,
    type: 'DELETE',
    success: callback,
    data: data,
    contentType: type
  });
}

edited May 04 '18 at 09:49

Sam

4,327
11
39
59

answered Jun 10 '15 at 16:34

Paul Wand

323
5
12

No data field I guess – Bob Dec 02 '19 at 16:46

score 2 · Answer 10 · edited Sep 17 '17 at 04:27

2

You can do it with AJAX !

For PUT method :

$.ajax({
  url: 'path.php',
  type: 'PUT',
  success: function(data) {
    //play with data
  }
});

For DELETE method :

$.ajax({
  url: 'path.php',
  type: 'DELETE',
  success: function(data) {
    //play with data
  }
});

edited Sep 17 '17 at 04:27

Alexander Yancharuk

12,892
5
49
54

answered May 18 '14 at 15:24

Xanarus

755
1
5
18

8

This was already said years before you posted this answer. This is just noise, adding totally nothing new. – Shadow Wizard Says No More War Jan 14 '18 at 08:45

score 2 · Answer 11 · answered Feb 27 '19 at 23:02

If you need to make a $.post work to a Laravel Route::delete or Route::put just add an argument "_method"="delete" or "_method"="put".

$.post("your/uri/here", {"arg1":"value1",...,"_method":"delete"}, function(data){}); ...

Must works for others Frameworks

Note: Tested with Laravel 5.6 and jQuery 3

score 1 · Answer 12 · answered Apr 06 '14 at 19:41

1

I've written a jQuery plugin that incorporates the solutions discussed here with cross-browser support:

https://github.com/adjohnson916/jquery-methodOverride

Check it out!

answered Apr 06 '14 at 19:41

AndersDJohnson

121
1
8

score -1 · Answer 13 · answered Sep 12 '13 at 22:36

-1

You could include in your data hash a key called: _method with value 'delete'.

For example:

data = { id: 1, _method: 'delete' };
url = '/products'
request = $.post(url, data);
request.done(function(res){
  alert('Yupi Yei. Your product has been deleted')
});

This will also apply for

answered Sep 12 '13 at 22:36

mumoc

41
4

3

This just does a post. – ctrl-alt-delor Feb 12 '14 at 18:54
1

This will work with rails, the _method is used to tunnel http methods over POST (although you should probably only use this with forms - they're only able to do get/post). – opsb Jul 11 '14 at 14:52
This will also work with Laravel if you're doing it from a form with the POST method. – John Shipp Feb 07 '15 at 19:00

How to send a PUT/DELETE request in jQuery?

13 Answers13

Linked

Related