Question

考虑以下场景：我有一个可以打开对话框的页面（jquery对话框）。此对话框允许用户更新某些值，甚至可以插入新值。用户有时会在“确认”按钮上多次单击，该按钮会触发更新或插入与单击时间一样多的内容。该方法是通过ajax调用（jquery ajax）触发的，成功时会向用户显示一个很好的“It's done”消息。

在更新方案中，没关系，即使我的服务器代码必须在调用方法时多次调用数据库上的update命令。但是在插入情况下，我的数据被提交了几次，并且在数据库中插入了几行。这会在其他方面造成很多问题。

我读到了post-redirect-get模式，这是我的问题的理想解决方案。但它只说了一个非ajax帖子。当通过ajax调用完成对方法的调用时呢？如何防止用户多次提交相同的内容？

我试图阻止对话框上的按钮，即使它有效，我认为是不好的解决方案，因为按钮可能不会一直被阻止，特别是如果用户在他的浏览器上有问题。

Answer 1

除了在用户点击后禁用“保存”按钮（这是一个非常合理的解决方案）之外，另一个选项是在表单提交中使用唯一的验证令牌，每次用户单击“保存”时都会对其进行验证。

请求表单视图时，生成唯一标识符（GUID或类似标识符），将其存储在用户的会话中，并将其传递给视图。在视图中，将唯一标识符包含为随表单提交的隐藏字段之一。现在，在处理表单提交时，将请求中的值与会话中的值进行比较。如果请求和会话值匹配，请使用新的唯一标识符替换会话中的值并执行数据库操作。如果请求和会话值不匹配，您将知道用户双重提交。

Answer 2

尽管Nathan Taylor的解决方案是可行和正确的，但我更喜欢做一些更简单的事情。我创建了一个本地布尔值，应检查表单是否已提交。第一次提交表单时，此变量会收到true并阻止进一步提交。检查以下代码：

<script type="javascript">
var isSubmit = false;

$('#myForm').submit(function(){
  //Check if this is the first time the form is submitted
  if(isSubmit === true){
  return false;
}
isSubmit = true;
//Executes the form submission as it should be
});
</script>

请记住在对话框范围内创建此isSubmit var，否则您将无法再提交此表单，当然，除非您在其他位置更改变量。

在ajax场景上实现重定向后模式

2 个答案: