620

GET:$.get(..)

POST:$.post()..

What about PUT/DELETE?

1
  • Better that we need loading as well Commented Jun 18, 2018 at 23:04

14 Answers 14

1020

You could use the ajax method:

$.ajax({
    url: '/script.cgi',
    type: 'DELETE',
    success: function(result) {
        // Do something with the result
    }
});
Sign up to request clarification or add additional context in comments.

6 Comments

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: geekswithblogs.net/michelotti/archive/2011/05/28/…
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: api.jquery.com/jQuery.ajax/#options
@andi As per stackoverflow.com/questions/1757187/… 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".
Also, you can't pass in form data. It has to go through the URI.
for versions after 1.9 you can use method or type
|
137

$.ajax will work.

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

2 Comments

PUT is need contentType: "application/json"
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).
79

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

2 Comments

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
@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.
31

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?

Comments

11

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.

Comments

10

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

Comments

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.

2 Comments

do you know which browsers do not support PUT or DELETE?
Broken ones, if they're not capable of HTTP :^)
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.

Comments

3

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

1 Comment

This was already said years before you posted this answer. This is just noise, adding totally nothing new.
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
  });
}

1 Comment

No data field I guess
3

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

Comments

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!

Comments

1

CRUD

this may make more sense

CREATE (POST)Request

function creat() {
  $.ajax({
    type: "POST",
    url: URL,
    contentType: "application/json",
    data: JSON.stringify(DATA1),
    success: function () {
      var msg = "create successful";
      console.log(msg);
      htmlOutput(msg);
    },
  });
}

READ (GET)Request

// GET EACH ELEMENT (UNORDERED)
function read_all() {
  $.ajax({
    type: "GET",
    url: URL,
    success: function (res) {
      console.log("success!");
      console.log(res);
      htmlOutput(res);
    },
  });
}

// GET EACH ELEMENT BY JSON
function read_one() {
  $.ajax({
    type: "GET",
    url: URL,
    success: function (res) {
      $.each(res, function (index, element) {
        console.log("success");
        htmlOutput(element.name);
      });
    },
  });
}

UPDATE (PUT)Request

function updat() {
  $.ajax({
    type: "PUT",
    url: updateURL,
    contentType: "application/json",
    data: JSON.stringify(DATA2),
    success: function () {
      var msg = "update successful";
      console.log(msg);
      htmlOutput(msg);
    },
  });
}

DELETE (DELETE)Request

function delet() {
  $.ajax({
    type: "DELETE",
    url: deleteURL,
    success: function () {
      var msg = "delete successful";
      console.log(msg);
      htmlOutput(msg);
    },
  });
}

GitHub Reference

Comments

0

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

3 Comments

This just does a post.
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).
This will also work with Laravel if you're doing it from a form with the POST method.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.