jQuery Ajax PUT with parameters

Jquery

Jquery Problem Overview


It seems that using jQuery Ajax POST will pass parameters, but PUT will not. I looked at the current jQuery code and PUT and DELETE are not there. I looked at 1.4.2 jQuery and PUT and DELETE are there.

What is the workaround for passing parameters with a PUT request using the current version of jQuery?

Jquery Solutions


Solution 1 - Jquery

Can you provide an example, because put should work fine as well?

Documentation -

The type of request to make ("POST" or "GET"); the 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.

Have the example in fiddle and the form parameters are passed fine (as it is put it will not be appended to url) -

$.ajax({
  url: '/echo/html/',
  type: 'PUT',
  data: "name=John&location=Boston",
  success: function(data) {
    alert('Load was performed.');
  }
});

Demo tested from jQuery 1.3.2 onwards on Chrome.

Solution 2 - Jquery

You can use the PUT method and pass data that will be included in the body of the request:

let data = {"key":"value"}

$.ajax({
    type: 'PUT',
    url: 'http://example.com/api',
    contentType: 'application/json',
    data: JSON.stringify(data), // access in body
}).done(function () {
    console.log('SUCCESS');
}).fail(function (msg) {
    console.log('FAIL');
}).always(function (msg) {
    console.log('ALWAYS');
});

Solution 3 - Jquery

For others who wind up here like I did, you can use AJAX to do a PUT with parameters, but they are sent as the body, not as query strings.

Solution 4 - Jquery

Use:

$.ajax({
    url: 'feed/4', type: 'POST', data: "_METHOD=PUT&accessToken=63ce0fde", success: function(data) {
        console.log(data);
    }
});

Always remember to use _METHOD=PUT.

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
Questionandrei gView Question on Stackoverflow
Solution 1 - JqueryJayendraView Answer on Stackoverflow
Solution 2 - Jqueryow3nView Answer on Stackoverflow
Solution 3 - JqueryDan MandleView Answer on Stackoverflow
Solution 4 - Jqueryuser3623446View Answer on Stackoverflow