Question

我有一个表单，在提交后我希望在表单处理时出现一个简短的“旋转轮”类型页面加载。确保一个人知道点击的典型眼睛，并且不会重新点击。

我有我的表格，我有以下代码：

<div style="display:none" id="pleasewait"><img src="images/loading.gif" /></div>
<script type=text/javascript>
$(function() {
$(".submit").click(function() {
    $("#pleasewait").show();
    $(".submit").load("contact.php", function(){ $("#pleasewait").hide(); });
    return false;
    });
});
</script>

问题是这个表单发布到PHP SELF并且一旦点击，而可爱的小旋转“请等待”出现并且看起来很棒，表单永远不会发布...它只是挂起。我试着看看JQuery是否可以告诉“如果POST”，但这看起来很棘手。有没有一种很好的方法来更改函数的最后一行，以便它能识别已发布的表单并停止微调器？我认为问题是第二个“.submit”部分...我只是想不出我需要做什么。

感谢您提供任何帮助或建议。

Answer 1

您正在加载未提交的contact.php页面。此外，您不应该使用按钮上的单击事件来提交表单。将代码添加到表单本身的submit事件中。你想要更像这样的东西。 仅供参考：我还没有测试过这段代码！

$(function() {
  $("#myform").on('submit', function (e) {
    e.preventDefault();
    $('#pleasewait').show();
    $.ajax({ 
      url:'contact.php',
      data : $('#myform').serialize(),
      success : function ( data ) {
        $('#pleasewait').hide();
      }
    });
  });
});

Answer 2

http://api.jquery.com/load/

.load()的第三个参数接受在完成时运行的函数。

所以你的解决方案应该是：

$(".submit").load("contact.php", {}, function(){ $("#pleasewait").hide(); });

Answer 3

我找到了一个非常简单的解决方案。起初它非常不稳定，但我意识到预加载图像解决了这个问题。

首先，＃optasewait的css为{display：none;}，直到需要它为止。

在页面的标题中，在脚本标记之间，我添加了以下代码：

function showimage()
{
document.getElementById('pleasewait').style.display = "block";
}

在文档的正文中，我添加了一个带动画gif的div：

<div id="pleasewait"><img src="spinningwheel.gif" /></div>

然后我刚刚使用（附在提交中）：

onClick="showimage()"

这完全按照我希望的方式运行，并且只要页面加载到PHP Self或其他页面，就会旋转滚轮。我不包括预装图像的代码，以便它能够顺利运行。希望这会帮助其他人解决同样的问题吗？

使用jquery使“页面加载”图形停止

3 个答案: