0

以下是我正在做的事情以及原因：

  1. 我有一个表单，根据用户输入使用不同的脚本进行预处理
  2. 通常脚本会在几秒钟内执行，但是一个脚本可能需要大约 10 秒，具体取决于服务器负载等。
  3. 现在我想实现这个“弹出窗口”，其中包含：“请稍候......”我为此使用了 blockUI - 实现这个的简单插件。
  4. 然而，用于快速执行脚本的 blockUI 非常愚蠢，因为用户只会看到屏幕上闪烁的弹出窗口。
  5. 因此我想为它设置超时，比如 1000 毫秒，这样即使表单已经完成，也会显示 blockUI
  6. 到目前为止我已经尝试了很多东西，现在我基本上使用 preventDefault 来取消 setTimeout 的表单提交，但之后我无法完成表单提交。

编辑：发现，由于 javascript 是异步语言，没有 preventDefault （停止表单提交） setTimeout 永远不会启动，并且操作会立即返回 true。

<form method="post" name="my_form" id="my_form" enctype="multipart/form-data">
    <input type="submit" name="my_submit" id="my_submit" value="Submit" />
    <div id="form_loading_message" style="display:none;"> 
        <h1>Please wait, page is loading...</h1> 
    </div>
</form>

$('#my_submit').click(function(event) {
    $.blockUI({
        message: $('#form_loading_message')
    });
    var form = $('#my_form');
    event.preventDefault();
    setTimeout(function () {
        form.unbind('submit').submit();
        $.unblockUI();
    }, 1000);
});

如果您有更好的想法如何做到这一点，请，我也愿意接受其他建议......

4

2 回答 2

0

不熟悉blockUI，但是......我会这样做：

<html>
    <head>
        <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.9.1.min.js" type="text/javascript"></script>

        <script type="text/javascript">
            $(document).ready(function(){
                $('#my_submit').click(function() {
                    $('#form_loading_message').show();
                    setTimeout('submitForm()', 1000);
                });
            });

            function submitForm(){
                $('#my_form').submit();
            }

        </script>
</head>
<body>
<form method="post" name="my_form" id="my_form" action="google.com" enctype="multipart/form-data">
    <input type="button" name="my_submit" id="my_submit" value="Submit" />
    <div id="form_loading_message" style="display:none;"> 
        <h1>Please wait, page is loading...</h1> 
    </div>
</form>
</body>
</html>
于 2013-10-01T15:17:07.233 回答
0

由于我没有找到如何使用 javascript 执行此操作，因此在将用户重定向到另一个页面之前，我使用了 php sleep() -function。自然需要删除 preventDefault ，因为它阻止了提交操作。这个解决方案为我解决了这个用例：只是向用户显示页面正在加载的消息。

于 2013-10-02T14:20:31.533 回答