为什么两次按下按钮时都没有两次提交此表格? [英] Why is this form not submitted twice when hitting the button twice?

问题描述

编辑25.07.2018:正如Pawnesh Kumar在回答中所说，这似乎是浏览器问题.如果我在Firefox中多次按下该按钮，则以下脚本将仅发送一个POST请求，但是如果我在Chrome中执行相同的操作，则每次点击都会收到一个POST请求.

Edit 25.07.2018: As Pawnesh Kumar said in the answer, this seems to be a browser issue. If I hit the button multiple times in Firefox the below script will only send one POST request, but if I do the same in Chrome I get a POST request for each click.

但是，我可以在01:00在视频中复制该问题.这意味着当我使用认证安装Laravel时，如果我单击提交按钮在两次登录表单中，Firefox将发送2个请求.

However, I can replicate the problem in the video at 01:00. This means when I install Laravel with Authentication, then if I click the submit button in the login form twice, Firefox will send 2 requests.

为什么当多次单击按钮时，Firefox为什么有时发送多个POST请求，有时仅发送一个请求?

Why is Firefox sometimes sending multiple POST request and sometimes only one, when clicking multiple times on the button?

我有一个用户表

id | name
 1 | John

，其中字段id是主整数自动递增键.当我提交仅具有一个按钮的虚拟表单时，这将插入名称为John的新记录.现在，这就是我观察到的:

where the field id is a primary, integer, auto-incremet key. When I submit a dummy form that only has one button, then this will insert a new record with name John. Now this is what I observed:

• 如果我一次提交了表单，请在浏览器中返回，再次提交，然后 我在数据库中找到了两个新行.

• If I submit the form once, go back in the browser submit it again, then I find two new rows in the DB.

如果我通过单击Add两次(或二十次)来提交表单 按钮，那么数据库中只有一个新行.

If I submit the form by clicking twice (or twenty times) on the Add button, then there is only a single new row in the DB.

那是为什么?我希望如果我多次单击提交"按钮，那么表单将发送多个请求-并插入多行.

Why is that? I would expect that if I hit the submit button multiple times, then the form will send multiple requests - and inserts multiple rows.

那是我的表格:

<form action="/test.php" method="POST">
  <input type="submit" value="Add">
</form>

提交给test.php的

:

<?php
$servername = "localhost";
$username = "adam";
$password = "password";
$dbname = "test-db";

$conn = new mysqli($servername, $username, $password, $dbname);       
$sql = "INSERT INTO user (name) VALUES ('John')";
if ($conn->query($sql) === TRUE) {
    echo "New record created successfully";
}     
$conn->close();

sleep(4);

由于sleep部分，我可以连续多次单击Add按钮.但是，无论我在加载时多久单击一次Add按钮，数据库中只有一个新行.

Because of the sleep part, I can click on the Add button multiple times in a row. However, no matter how often I click the Add button while loading, there is only one new row in the DB.

在我的access.log文件中，单击按钮20次后，我也只找到一个GET和POST请求:

In my access.log file I also find only one GET and POST request after clicking the button twenty times:

2001:****:****:4400:****:****:****:****--[25/Jul/2018:11:30:03 +0200]"GET/test/form.php HTTP/1.1" 200301-""Mozilla/5.0(X11; Ubuntu; Linux x86_64; rv:57.0)Gecko/20100101 Firefox/57.0""****** * .net"

2001:****:****:4400:****:****:****:**** - - [25/Jul/2018:11:30:03 +0200] "GET /test/form.php HTTP/1.1" 200 301 "-" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:57.0) Gecko/20100101 Firefox/57.0" "*******.net"

2001:****:****:4400:****:****:***:****--[25/Jul/2018:11:30:34 + [0200]"POST/test/test.php HTTP/1.1" 200 31"http://********.net/test/form.php""Mozilla/5.0(X11; Ubuntu; Linux x86_64; rv:57.0)Gecko/20100101 Firefox/57.0" ********.net"

2001:****:****:4400:****:****:***:**** - - [25/Jul/2018:11:30:34 +0200] "POST /test/test.php HTTP/1.1" 200 31 "http://********.net/test/form.php" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:57.0) Gecko/20100101 Firefox/57.0" "********.net"

---

备注:

我已经阅读了有关防止多次提交的技术 在后端或前端.因此，我认为应该可以通过多次单击按钮来多次提交表单.

I have read about techniques to prevent multiple submissions either in the backend or frontend. Thus I think it should be possible to submit the form multiple times by hitting the button multiple times.

我还在Wiki文章发布/重定向/获取中读到了这种模式无法防止用户多次汇总表格:

I also read in the wiki article Post/Redirect/Get that this pattern can not prevent if a user sumbits a form multiple times too quick:

如果网络用户由于服务器延迟而在完成首次提交之前刷新，从而导致某些用户代理中存在重复的POST请求.

If a web user refreshes before the initial submission has completed because of server lag, resulting in a duplicate POST request in certain user agents.

还在1:00的视频中，有人双击按钮，由于他提交了两次，因此出错.

Also in this video at 1:00 someone double clicks on a button and gets an error because he submitted twice.

推荐答案

这是浏览器.

我相信您是在谈论用户多次单击按钮时的情况.在后台时，页面开始重新加载.

I believe you are talking about the situation when a user clicks multiple times on the button. While in the background the page start reloading.

当我们点击提交"按钮时，浏览器将请求发送到服务器.直到响应接收到一些浏览器显示旧页面(已过期)，同时简单地清除视图.

When we hit the submit button browser send the request to server. Until the response receive some browser show the old(expired) page while some simple clean the view.

在Firefox中，即使单击多次，它也不会触发任何事件.每次用户单击时，Chrome都会在其中将请求提交到服务器.

In Firefox, it won't fire any event in spite of clicking many times. Wherein Chrome it submit the request to the server every time user click.

因此，最重要的是浏览器处理事物的方式.您的日志还显示您正在使用Firefox，情况就是如此.

So, the bottom line it is the way the browser handles things. Your logs also showing you were using Firefox so that the case.

这篇关于为什么两次按下按钮时都没有两次提交此表格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！