提交表单，刷新页面前显示div

Question

在提交表单上重新加载页面之前，我不想在2秒内显示微调器。

<form class="ready" action="https://link.com" method="post">
<input name="test" type="submit" class="click" value="order"/>
</form>

我已经让旋转器工作了：

<div class="thespinner"></div>    
<script>    
$('.click').click (function () {    
$(".thespinner").fadeIn("slow"); 
});
</script>

尝试用这段代码简单地向微调器添加一个链接延迟，但数据不会进入数据库：

<script>
$('.click').click (function (e) {
$(".thespinner").fadeIn("slow");
e.preventDefault(); //will stop the link href to call the blog page
setTimeout(function () {
window.location.href = "https://link.com";
}, 2000);
});
</script>

所以点击按钮，显示微调器2秒，然后加载操作url/reload页面(数据应该在微调器显示时发送(。

提前感谢！

附言：我通常不编写javascript代码。

Answer 1

在重定向之前，您需要通过ajax发送表单

$('#theForm').bind('submit', function (e) {
e.preventDefault();
$(".thespinner").fadeIn("slow");
$.ajax({
type: "POST",
url: 'someurl.htm',
data: {},
success: function () {
setTimeout(function () {
window.location.href = "https://link.com";
}, 2000);
},
error: function(jqXHR, textStatus, error) {
console.log(textStatus)
}
});
});

.thespinner { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="thespinner">Spinner</div>
<form id="theForm" >
<input type="text" name="something" />
<button>Submit</button>
</form>

Answer 2

以下是如何在AJAX请求期间显示微调器(即表单数据在后台发送(，然后在请求完成后重定向：

$('.ready').submit(function(e) {
$(".thespinner").fadeIn("slow");
e.preventDefault(); //will stop the link href to call the blog page
$.post("https://jsonplaceholder.typicode.com/posts", $(this).serialize(), function(reply) {
window.location.href = "https://link.com";
});
});

.thespinner {
display: none;
text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="ready" action="https://link.com" method="post">
<input name="test" type="submit" class="click" value="order" />
</form>
<div class="thespinner"><img src="https://loading.io/spinners/wave/index.wave-ball-preloader.svg"></div>