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

Posted 2023-05-09

【中文标题】提交表单，刷新页面前显示div

【英文标题】：Submit form, show div before refreshing page

【发布时间】：2019-05-01 14:08:08

【问题描述】：

在重新加载提交表单上的页面之前，我不想在 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/重新加载页面（数据应该在微调器显示时发送）。

提前致谢！

附：我通常不会编写 javascript。

【问题讨论】：

window.location.href = "https://link.com"; 不发送数据。您需要提交表单：$('.ready').submit(); 您似乎也在问(the data should be send while spinner is showing) 的内容根本不会那样工作，这需要通过 ajax 发送表单。听起来您想重新创建您在其他地方看到的东西，而没有真正了解底层机制是什么。为什么要显示一个微调器两秒钟？如果发送数据需要一段时间，并且您想在此期间显示微调器，有更好的方法来实现。

我们正在对“计算”发出请求，而在服务器计算（sql-server）时，我们不想制作一个小 gif，这样人们就不必再次刷新页面（并且数据库有时间发送数据）

我用我的版本发布了答案；当您提供反馈时，请逐字记录您遇到的所有错误。

【参考方案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>

【讨论】：

不工作 - 但刚刚意识到我们在提交时将数据放入数据库中的表中。这可能是问题所在吗？

你能澄清你所说的“不工作”是什么意思吗？有一个具体的错误吗？我假设你的意思是你正在调用一个将东西放入数据库的 API？只要您的 API 提供适当的响应，这应该不会产生影响。

【参考方案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>