使用JavaScript/PHP有效地构建`Delete`按钮

Question

以下哪个代码可以更好地构建一个delete用于删除问题的动作？

1 我的代码

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

2 Stack Overflow的代码

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

我不完全理解Stack Overflow的删除按钮如何工作,因为它指向没有URL.该id显然只能通过CSS和JavaScript中使用.Stack Overflow显然使用JavaScript进行操作.

1. 你如何delete通过JavaScript 启动基于CSS -file内容的-action？
2. 如何通过JavaScript启动SQL delete -command？我知道你如何通过PHP来做到这一点,而不是通过JavaScript.

Answer 1

您的方法不安全,因为用户代理可能无意中抓取链接并删除帖子而无需用户干预.例如,Googlebot可能会这样做,或者用户的浏览器可能会预先获取页面以加快响应时间.

来自RFC 2616:超文本传输​​协议 - HTTP/1.1

9.1.1安全方法

实施者应该意识到软件代表用户在互联网上的交互,并且应该小心地让用户知道他们可能采取的任何可能对他们自己或他人有意想不到的意义的行为.

特别是,已经建立了这样的惯例:GET和HEAD方法不应该具有采取除检索之外的动作的重要性.这些方法应该被认为是"安全的".这允许用户代理以特殊方式表示其他方法,例如POST,PUT和DELETE,以便使用户意识到正在请求可能不安全的操作.

当然,不可能确保服务器不会因执行GET请求而产生副作用; 实际上,一些动态资源会考虑这个功能.这里的重要区别是用户没有请求副作用,因此不能对他们负责.

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

Answer 2

在锚点上绑定一个以"delete_post_"开头的click事件,并使用它来启动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上阅读所有相关内容.