Using HTTP PUT to send JSON with Jquery and Rails 3

Question

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?

Answer 1

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.

Answer 2

I think your problem is that JSON.stringify converts the data structure to a JSON string, rather than to a nice URL. Try letting jQuery handle the encoding instead:

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

Edit

Perhaps the easiest solution is to make a new helper function for PUT requests:

$.put = function(url, data, success, dataType) {
    $.ajax({
        url: url,
        data: data,
        success: success,
        dataType: dataType,
        type: 'POST',
        beforeSend: function(xhr){
            xhr.setRequestHeader("X-Http-Method-Override","put");
        }
    });
};

You could then call this with:

$.put(
    window.location.hostname,
    JSON.stringify({my_data: 1}),
    null,
    'json'
}