在页面之间显示“页面加载”消息答案

【问题标题】：Display a 'Page Loading' message between pages在页面之间显示“页面加载”消息
【发布时间】：2012-05-22 16:54:49
【问题描述】：

我的网站上有一个form，提交后会将用户从Page1.html 带到Page2.html。

我想在提交的表单和“Page2 loading”之间显示一条消息。

谁能给我一个例子？

【问题讨论】：

display "page loading" message 的可能重复项

标签： javascript jquery html lightbox modal-dialog

【解决方案1】：

如果您的表单通过 ajax 提交数据，那么您可以尝试以下操作：

$('form#myform').submit(function(e) {
   e.preventDefault();
   $('#message').html('Sending....');  // #message may be a div that contains msg
   $ajax({
     url: 'url_to_script',
     data: 'your_data',
     success: function(res) {
       // when submit data successfully then page reload
       window.location = 'page2.html'
     }
   });
});

【讨论】：

这看起来就是票。我会尽快尝试。非常感谢！！

【解决方案2】：

标准表单提交无法完成您想做的事情。

您需要使用 ajax 提交表单，并在等待响应时显示“请稍候”消息。一旦收到响应并验证为 OK，您就可以将用户重定向到您现在调用 page2 的页面。

通过 ajax 提交表单的最简单方法是将serialize 传递给字符串并传递。然后，您需要一个页面来处理接收到的数据，并返回 OK 或 ERR。

JS 需要解读下一个动作。

这未经测试，而是从各种工作项目中复制和粘贴的。你需要download and include the json2.js project.

第 1 页

<div id='pleaseWait'>Please Wait...</div>
<form id="theForm" onsubmit="doAjaxSubmit();">
    <input type='text' name='age' id='age' />
    <input type='submit' value='submit'>
</form>

<script type="text/javascript">
    function doAjaxSubmit(){
        var j = JSON.stringify($('#theForm').serializeObject());

        $('#pleaseWait').slideDown('fast');
        $.post('processor.php?j=' + encodeURIComponent(j), function(obj){
            if(obj.status=='OK'){
                window.location='page2.php';
            }else{
                $('#pleaseWait').slideUp('fast');
                alert('Error: ' + obj.msg);
            }
        }, 'json');
        return(false);
    }    


    $.fn.serializeObject = function(){
        var o = {};
        var a = this.serializeArray();
        $.each(a, function() {
            if (o[this.name]) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    };
</script>

processor.php

<?php

    $j=json_decode($_POST['j'], true);


    if ((int)$j['age']<=0 || (int)$j['age']>120){
       $result = array('status'=>'ERR', 'msg'=>'Please Enter Age');
    }else{
        //Do stuff with the data. Calculate, write to database, etc.
        $result = array('status'=>'OK');
    }
    die(json_encode($result));
?>

这本质上与下面的答案非常相似（@thecodeparadox），但我的示例展示了如何在无需手动构造数据对象的情况下传递整个 for，展示了如何在 PHP 端进行验证以及返回适当的 JSON 数据来重定向用户，或显示错误，并使用动画来显示消息。

【讨论】：