Support clicking a link, but sending a POST (vs GET) to the server, without Ajax?

Question

I'm thinking this isn't exactly possible, but maybe I'm wrong. I'm simply torn between those who believe that only POST requests should modify data on the server and people that relax the rule and allow GET requests to modify data.

Take this situation. Say you have a table, each row is a row in the database. I'd like to allow them to delete the row via a fancy "X" icon as the very last <td></td> element in the row. AFAIK, the only way to send a POST to the server is via a form. But do I really stuff an entire form into the last <td></td> element just to do a POST? Or should I cheat and use an <a href=...></a> tag that sends a GET request?

You may be thinking "Do both! Send a POST AND use the <a ...></a> tag! Use fancy javascript + xhr!" And I'll say, oh? And how will that degrade in a zero javascript environment?

Maybe we've reached a point when it doesn't make sense to worry about gracefully degrading? I'm not sure. You tell me? I'm new to web development, but I understand most of the concepts involved.

Answer 1

I don't advise ignoring the convention about GET vs POST. The back button and page refreshes and things like that will give you hell. (And every time you field a POST request, redirect to a fresh view, for the same reasons.)

Only you know your users, but I think it's pretty acceptable nowadays to require javascript in a 'web application' and let the no-js guys stick to 'web pages.' Anyway, for what it's worth, I sometimes like to do a less fancy (than AJAX) javascript solution like this...

Put a form anywhere you want in the page:

<form method="post" target="yourpage.ext" id="deleteRecordForm">
 <input type="hidden" name="IdToDelete" value="" id="deleteRecordInput" />
</form>

For your link:

<a href="#" onclick="deleteRecord(thisId);return false;">[x]</a>

Finally, the javascript:

<script type="text/javascript">
 function deleteRecord (id){
   if (confirm ('Are you sure you want to delete this record?')){
     document.getElementById('deleteRecordInput').value = id;
     document.getElementById('deleteRecordForm').submit ();
   }
 }
</script>

Answer 2

One of the problems with a GET request modifying data is that by visiting the link data is changed. The link might not even be navigated to by a person, e.g. Google crawling your site. Hitting refresh also changes the data.

Answer 3

You don't have to cram a form into each final td -- you can surround the entire table with a single form that has a submit button in each final td. Each needs a different name/id value, e.g.

    <td><input type="submit" name="delete_172" value="Delete"></td>
    ...
    <td><input type="submit" name="delete_198" value="Delete"></td>

Then the server will receive a single delete_172=Delete in the form POST parameters. Scan through all the parameters to match delete_[0-9]+, split on underscore, and you have the record ID of the record to be deleted, or you have a Map key to find the record ID to delete (if you want to keep record IDs out of the page for security)

AFTER that works, attach a JS event handler to the form onSubmit event to submit the whole thing through XHR and dynamically delete the table row.