How can I create a RESTful-style website if HTML forms only allow to use GET and POST?

Question

Let's say that I want to create a website where users will be able to create, edit and delete some kind of resources, for example posts.

I have created a RESTful API, so user can create a post by sending a PUT request to http://www.example.com/posts/my-new-awesome-post, delete it by sending DELETE request, etc.

But most users don't know anything about HTTP requests. They want to click a "New post" button and have the new post created. But HTML only allows me to use GET and POST.

How can I create a "New post" button that will send a PUT request? Or is "RESTful creation/deletion" implemented in a totally different way?

Let's say I'm using Spring + Thymeleaf.

Answer 1

The 'New Post' button would go to a form for the user to input the information for a new post. When the user submits that form the browser rightly sends that data via HTTP POST (use POST for create).

An edit submission would use PUT or PATCH depending on whether it is a replace (delete the missing properties) or update (only change the submitted properties), respectively.

We usually make an XMLHTTPRequest (XHR) using JavaScript for events other than GET or POST.

jQuery.ajax('/products/42', {method: 'PUT', data: product_data});

jQuery Docs: http://api.jquery.com/jquery.ajax/

Additionally, Rails will use a '_method' param in POSTs to force a different action on the server ( like PUT or PATCH).

Answer 2

How can I create a "New post" button that will send a PUT request?

Don't. Not when you are returning HTML.

Or is "RESTful creation/deletion" implemented in a totally different way?

Slightly the wrong question. REST doesn't care how you do it, beyond the rule that you are using hypermedia controls and media-types. HTTP affords PUT and DELETE as methods. But HTML is a well specified media-type that doesn't support PUT and DELETE.

So if you want "New Post", in a restful html application, then you specify a form with the POST method. If you want "Delete Post" then you specify a form with the POST method.

PUT and DELETE are idempotent. If you want that for POST, you have to do a bit of extra work. The html forms should already have in them unique URIs (the URI identifies the resource, but it doesn't promise that the "resource" already exists). You add checks to the handling of the posted forms that check to see if a message with that unique identifier has already been processed.

A browser reading your html won't know that the form is idempotent, but you can document that it is, and other consumers can use that knowledge. If you were really going all out, you would presumably have two different media-types: text/html for browsers, and a text/vnd.infranoise+html representation available for other clients. Disclaimer: I don't know of any API's that actually do that for html representations.

The unique identifiers require some special handling. When all copies of your form start in the same state, then the URI /x/y/myform takes care of you. But here, we want a unique version of the form -- we want the form to specify which item we are creating/deleting. For delete, we may be able to use the itemId: /z/y/x?itemId=12345. For create, we don't have an id yet -- so we solve this with 303 (See Other). We make the "create" link go to /a/b/c, and have that generate a new id, and then redirect the browser to /a/b/c?itemId=...

Finally, there's the question of what URI spellings to use. REST doesn't care. But common URI design guidelines correctly point out that resources are nouns.

There are a lot of APIs for manipulating resources in collections, but most that I have found are not restricted to the HTML methods. One approach would be to maintain two collections; post to one collection to create the document, post to the opposite collection to remove the document -- think "trash can", rather than delete.

Another possibility would be to embrace the fact that your resources for dispatching create/delete commands are forms, and can be obtained from the forms collection

/forms/createPostForms?itemId=12345
/forms/deletePostForms?itemId=12345

Wanna go bike shedding?

/forms/createPostForms?itemId=12345
/forms/post/12345/create
/forms/post?type=create&itemId=12345
/forms/post/12345,create
/posts/12345/create
/posts/12345/forms/create
/posts/12345/forms?type=create
/nonsequiturs?itemId=12345&type=post&action=create

REST doesn't care. HTML doesn't care. Compliant browsers don't care. Your HttpRequestHandler only cares insofar as it needs to know the right URI template(s) to use.