支持单击链接，但在不使用 Ajax 的情况下向服务器发送 POST（相对于 GET）？

Question

我认为这不太可能，但也许我错了。我只是在那些认为只有 POST 请求才应该修改服务器上的数据的人和放宽规则并允许 GET 请求修改数据的人之间左右为难。

就拿这个情况来说。假设您有一个表，每一行都是数据库中的一行。我想允许他们通过一个精美的“X”图标作为行中最后一个 元素来删除该行。 AFAIK，向服务器发送 POST 的唯一方法是通过表单。但是我真的将整个表单填充到最后一个 元素中只是为了执行 POST 操作吗？或者我应该作弊并使用发送 GET 请求的 标签？

您可能会想“两者都做！发送 POST 并使用 标签！使用花哨的 javascript + xhr！”我会说，哦？在零 JavaScript 环境中，这将如何降低性能？

也许我们已经到了一个地步，担心优雅的降级已经没有意义了？我不知道。你告诉我？我是网络开发新手，但我了解其中涉及的大部分概念。

Answer 1

您不必将表单塞入每个最终 td 中 - 您可以使用单个表单包围整个表格，该表单在每个最终 td 中都有一个提交按钮。
每个都需要不同的名称/id 值，例如，

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

然后服务器将以POST 参数形式接收单个delete_172=Delete。
扫描所有参数以匹配delete_[0-9]+，下划线分割，你就有了要删除的记录的记录ID，或者你有一个Map键来查找记录ID删除（为了安全起见，如果您想将记录 ID 保留在页面之外），

之后，将 JS 事件处理程序附加到表单 onSubmit 事件，以通过 XHR 提交整个内容并动态删除表行。

Answer 2

修改数据的 GET 请求的问题之一是通过访问链接数据会发生更改。该链接甚至可能不会被人导航到，例如 Google 抓取您的网站。点击刷新也会更改数据。

Answer 3

我不建议忽略有关 GET 与 POST 的约定。后退按钮和页面刷新之类的事情会让你很痛苦。 （出于同样的原因，每次您发出 POST 请求时，都会重定向到一个新视图。）

只有您了解您的用户，但我认为现在在“Web 应用程序”中要求 javascript 并让 no-js 是相当可以接受的人们只关注“网页”。不管怎样，为了它的价值，我有时喜欢做一个不那么花哨的（比AJAX）javascript解决方案，像这样...

将表单放在页面中任何你想要的地方：

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

对于你的链接：

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

最后，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>