How to send a PUT/DELETE request in jQuery?

JqueryHttprequestPut

Jquery Problem Overview


GET:$.get(..)

POST:$.post()..

What about PUT/DELETE?

Jquery Solutions


Solution 1 - Jquery

You could use the ajax method:

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

Solution 2 - Jquery

$.ajax will work.

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

Solution 3 - Jquery

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

Solution 4 - Jquery

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?

Solution 5 - Jquery

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.

Solution 6 - Jquery

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
    }
});

Solution 7 - Jquery

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.

Solution 8 - Jquery

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.

Solution 9 - Jquery

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
  });
}

Solution 10 - Jquery

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
  }
});

Solution 11 - Jquery

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

Solution 12 - Jquery

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!

Solution 13 - Jquery

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionuser198729View Question on Stackoverflow
Solution 1 - JqueryDarin DimitrovView Answer on Stackoverflow
Solution 2 - JqueryJacob RelkinView Answer on Stackoverflow
Solution 3 - JqueryStepan SuvorovView Answer on Stackoverflow
Solution 4 - JqueryPekkaView Answer on Stackoverflow
Solution 5 - Jqueryuser2503775View Answer on Stackoverflow
Solution 6 - JquerymoodboomView Answer on Stackoverflow
Solution 7 - JqueryPascal MARTINView Answer on Stackoverflow
Solution 8 - JqueryantpawView Answer on Stackoverflow
Solution 9 - JqueryPaul WandView Answer on Stackoverflow
Solution 10 - JqueryXanarusView Answer on Stackoverflow
Solution 11 - JqueryMarcos RegisView Answer on Stackoverflow
Solution 12 - JqueryAndersDJohnsonView Answer on Stackoverflow
Solution 13 - JquerymumocView Answer on Stackoverflow