【问题标题】：To build a `Delete` -button efficiently with JavaScript / PHP使用 JavaScript / PHP 高效地构建“删除”按钮
【发布时间】：2009-08-21 18:06:21
【问题描述】：

以下哪个代码更适合构建delete -action 以删除问题？

1 我的代码

<a href='index.php?delete_post=777>delete</a>

2 堆栈溢出的代码

<a id="delete_post_777>">delete</a>

我不完全理解 Stack Overflow 的删除按钮是如何工作的，因为它没有指向任何 URL。 id 显然只能由 CSS 和 JavaScript 使用。 Stack Overflow 显然使用 JavaScript 来执行操作。

如何通过 JavaScript 根据 CSS -file 的内容启动 delete -action？
如何通过 JavaScript 启动 SQL 删除命令？我知道如何通过 PHP 执行此操作，而不是通过 JavaScript。

【问题讨论】：

感谢您的回答！ - 我接受 SeanJA'n 的回答，因为它采用了 John 和 Fabian 回答中最好的部分。

标签： javascript php button

【解决方案1】：

您的方法不安全，因为用户代理可能会在没有用户干预的情况下无意中抓取链接并删除帖子。例如，Googlebot 可能会这样做，或者用户的浏览器可能会预取页面以加快响应时间。

来自RFC 2616: Hypertext Transfer Protocol -- HTTP/1.1

9.1.1 安全方法

实施者应该意识到软件代表用户在他们的互联网上的互动，以及应小心让用户注意他们可能采取的任何行动采取可能有意想不到的对自己或他人的意义。

特别是，该公约已确定 GET 和 HEAD 方法不应该有采取其他行动的意义比检索。这些方法应该被认为是“安全的”。这允许用户代表其他方法的代理，例如 POST、PUT 和 DELETE，在一个特殊的方式，使用户成为意识到一个可能的事实正在请求不安全的操作。

当然不可能确保服务器不产生副作用执行 GET 请求；实际上，一些动态资源认为特征。重要的区别这是用户没有请求副作用，因此不能对他们负责。

执行此操作的正确方法是使用按钮通过 POST 提交表单，或使用 JavaScript 进行删除。 JavaScript 可以提交一个隐藏的表单，导致整个页面重新加载，或者它可以使用 Ajax 进行删除而不重新加载页面。无论哪种方式，重要的一点是避免在您的页面中出现可能被不知情的用户代理无意中触发的裸链接。

【讨论】：

【解决方案2】：

在以 "delete_post_" 开头的锚点上绑定一个点击事件，并使用它来启动 Ajax 请求。

$("a[id^='delete_post_']").click(function(e){
  e.preventDefault(); // to prevent the browser from following the link when clicked
  var id = parseInt($(this).attr("id").replace("delete_post_", ""));

  // this executes delete.php?questionID=5342, when id contains 5342
  $.post("delete.php", { questionID: id },
    function(data){
      alert("Output of the delete.php page: " + data);
    });

});

//更新使用上面的$.post()，JavaScript 代码在后台调用类似delete.php?id=3425 的页面。如果delete.php 包含任何输出，您可以在数据变量中使用它。

这是使用 jQuery。在http://docs.jquery.com/How_jQuery_Works阅读所有相关信息。

【讨论】：

能否举一个你的 Ajax 代码示例。我是这个领域的新手。
我找到了这个例子stackoverflow.com/questions/1141793/…我不确定是不是你的意思。
它在href of the element *a*中传输有关将要删除的问题的数据。 您将 question_id 转移到哪里？
是的，就是这样。唯一的区别是它使用 href 属性来存储 id 而不是 id 属性。 PS。添加了一行我忘记的代码。
应该是 jQuery(this).attr('question_id')

【解决方案3】：

您要查找的网址在 js 代码中。就我个人而言，我会有一个 id 来标识每个带有特定帖子、评论...或其他内容的标签，然后在每个标签上都有一个 class="delete_something"，然后使用 javascript 将其发布到正确的位置。

像这样：

<a href="#" class="delete_post" id="post_111" title="Delete Post">Delete</a>

<script type="text/javascript">
jQuery('a.delete_post').live('click', function(){

    jQuery.post('delete.php', {id: jQuery(this).attr('id')}, function(data){
        //do something with the data returned
    })
});
</script>

【讨论】：

我喜欢即使我的分数最少但它是公认的答案。有趣。

【解决方案4】：

你说的很对，如果没有 href="..." 属性，那么如果没有 JavaScript，链接就无法工作。

通常，JavaScript 所做的是使用AJAX 联系服务器：这是异步 JavaScript 和 XML。它与服务器联系，就像您直接访问页面一样，但在后台这样做，而不更改浏览器显示的页面。

然后，该服务器端页面可以执行您需要的任何处理。无论哪种情况，都是 PHP 完成工作，而不是 JavaScript。

关于效率的主要区别在于，在传统模型中，您将POST 一个表单发送到一个 PHP 页面，在完成请求后，您必须将整个页面呈现为“结果”，并加上 @987654324 @，以及所有可见的页面内容。

但是，当您使用 AJAX 进行后台请求时，访问者永远看不到结果。事实上，它通常甚至不是人类可读的结果。在此模型中，您只需要传递 JavaScript 可以用来更改页面的 new 信息。

这就是为什么 AJAX 通常被视为比传统模型“更高效”的原因：更少的数据需要来回传输，并且浏览器（通常）需要做更少的工作来将数据显示为这页纸。在您的“删除”示例中，唯一的通信是“delete=777”，然后可能是“success=true”（只是稍微简化一下）——为了产生如此大的效果，只需少量信息即可！

【讨论】：

【解决方案5】：

这完全取决于您的应用程序是如何构建的，在 Stack Overflow 上发生的情况是删除链接点击被 JavaScript 捕获，并且正在发出 Ajax 请求以删除帖子。

您可以使用 JavaScript 库轻松捕获对匹配选择器规则的所有元素的点击。

然后您可以使用 Ajax 向 PHP 脚本发送请求以执行 SQL 工作。

顺便说一句，理想情况下，您不会使用 GET 来删除条目，而是使用 POST，但那是另一回事了。

【讨论】：