jQuery Ajax PUT with parameters

Question

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?

score 95 · Answer 1 · edited Nov 07 '17 at 23:25

95

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.

edited Nov 07 '17 at 23:25

Peter Mortensen

30,738
21
105
131

answered Nov 07 '11 at 07:59

Jayendra

52,349
4
80
90

Have you tried getting parameters on server side? I use getParameter() in doPut() and params are not passed – andrei g Nov 07 '11 at 15:45
i tried using HttpRequest and same result, so it's not jquery fault, but why latest Chrome doesn't pass PUT params? – andrei g Nov 07 '11 at 19:38
if i append params to url it works, but it's just not right way to pass params – andrei g Nov 07 '11 at 20:44
So Jayendra, thanks, are you saying servlet engine (i am using Tomcat) will not get params for PUT request and I should parse it myself from the input stream? – andrei g Nov 07 '11 at 23:57
3

Demo link is broken – Edwin O. Mar 13 '17 at 12:17

score 36 · Answer 2 · answered Apr 01 '18 at 13:53

36

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

answered Apr 01 '18 at 13:53

ow3n

5,974
4
53
51

The line with the comment `// access in body` - how can that data be accessed? In PHP when I try this and do some echoing both the $_GET and $_POST superglobals are empty arrays. – knot22 Sep 08 '19 at 23:50
1

It seems that adding `$data = json_decode(file_get_contents('php://input'), true);` to the PHP script allows the data to be accessed. – knot22 Sep 09 '19 at 00:05
1

NOTE: jQuery 1.9+ added `method` which is used instead of `type` so if you're coming here wondering why the docs aren't working, you might be running an older version of jQuery. – Joshua Pinter Mar 31 '20 at 20:14

Dan Mandle · Answer 3 · 2017-12-06T21:44:20.170

11

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.

edited Dec 06 '17 at 21:44

answered Jul 09 '14 at 21:30

Dan Mandle

5,608
3
23
26

score -9 · Answer 4 · edited Nov 07 '17 at 23:27

-9

Use:

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

Always remember to use _METHOD=PUT.

edited Nov 07 '17 at 23:27

Peter Mortensen

30,738
21
105
131

answered Jun 16 '15 at 14:30

user3623446

1

I would generally advise against parsing the data as a string as this prevents the app been dynamic and is harder to read than a simple object array. Additionally you can use `type: 'PUT'` instead of putting it in the data. – Jono20201 Jul 07 '15 at 10:38

jQuery Ajax PUT with parameters

4 Answers4

Linked