开发者

How to send a PUT/DELETE request in jQuery?

开发者 https://www.devze.com 2022-12-18 21:39 出处:网络
GET:$.get(..) 开发者_运维百科POST:$.post().. What about PUT/DELETE?You could use the ajax method:

GET:$.get(..)

开发者_运维百科POST:$.post()..

What about PUT/DELETE?


You could use the ajax method:

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


$.ajax will work.

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


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


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?


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.


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


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.


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.


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


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


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


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!


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


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

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号