Using HTTP PUT to send JSON with Jquery and Rails 3

12,104

AJAX supports the PUT verb directly so why bothering with _method and custom HTTP headers:

$.ajax({
    url: window.location.pathname,
    type: 'PUT',
    contentType: 'application/json',
    data: JSON.stringify({ page: { my_data: 1 }),
    dataType: 'json'
});

Also make sure you are respecting the same origin policy or jquery might try to use JSONP which works only with GET verbs.

Share:
12,104
Daniel Beardsley
Author by

Daniel Beardsley

I'm an independent Web Developer located on the Central Coast of California. I mostly develop using Ruby on Rails, but have been trying out Sinatra, Node.js, and other fun things as of late.

Updated on July 25, 2022

Comments

  • Daniel Beardsley
    Daniel Beardsley almost 2 years

    HTTP PUT isn't entirely cross browser so Rails (I'm using Rails 3) supports using POST and passing the _method query param. This is great, but it doesn't seem to work when sending JSON.

    Example:

    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({_method:'PUT', page:{my_data: 1}),
        dataType: 'json'
    });
    

    When Rails sees this, it doesn't recognize the '_method' override because it's passed in the JSON format (perhaps that conversion is later?). Rails returns an error "No route matches ..." saying it can't find the route (to the resource), I assume because it doesn't match the REST update=HTTP PUT verb, I've even tried appending this to the URL: ?_method=PUT but got the same result.

    The only thing that does seem to work is setting an HTTP header:

    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({my_data: 1}),
        dataType: 'json',
        beforeSend: function(xhr){
            xhr.setRequestHeader("X-Http-Method-Override","put");
        }
    });
    

    Is setting the HTTP override header the best way?

  • dev-null-dweller
    dev-null-dweller over 13 years
    Not all browsers support PUT and DELETE methods in XmlHTTPRequest, but if you target modern ones go with it.
  • Daniel Beardsley
    Daniel Beardsley over 13 years
    HTTP spec describes PUT, POST, ... AJAX is just a collection of technologies. Though, you seem to be right (after much looking around) that most modern browsers support HTTP PUT.
  • Daniel Beardsley
    Daniel Beardsley over 13 years
    It looks like most web browsers 4 years ago supported this (PUT POST DELETE for XmlHTTPRequests), so it's safe to say it works just fine. My original error was caused by mixing up PUT / POST when routing to rails.