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 /重新加载页面（数据应在微调器显示时发送）。

谢谢！

P.s。我通常不编写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>

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

2 个答案: