javascript - 显示 "page loading"消息

Question

我试图在 html 页面中显示用于“页面加载”的图像 (.gif)，直到显示 my_script.py 的输出，但我不知道该怎么做。 This是我到目前为止所得到的。非常感谢。

HTML:

<div id="loading">
   <p><img src="./images/loading.gif" /> Please Wait</p>
</div>

<form action="./cgi-bin/my_script.py" method="post" enctype="multipart/form-data" name="fname">
   <input type="submit" id="submit" value="Submit" />
</form>

js:

 $(document).ready(function() {
        $("form").submit(function() {
            showLoading();
            $('#content').load('./cgi-bin/my_script.py', null, showResponse);
        });

        function showResponse() {
            hideLoading();
        }

        function showLoading() {
            $("#loading").show();
        }

        function hideLoading() {
            $("#loading").hide();
        }
    });

Answer 1

您的脚本可以简化为:

$(document).ready(function() {
    $("form").submit(function(e) {
        e.preventDefault();
        $('#content').html('put your loading html here').load('/ajax_html_echo/',function(response, status, xhr) {
            //This is the callback. You can check for error here.
            //For example if (status == 'error') alertTheMedia();
        });
    });
});​

我做的修改是:

• e.preventDefault() 用于在用户启用 Javascript 时阻止默认表单提交。
• 在#content选择器中添加了加载消息，将html()的内部更改为您想要显示的内容。这将导致初始内容成为您的加载消息，然后它将被 .load 成功返回的内容替换，或者您必须明确告诉它要替换的内容，如果它是一个错误。
• 精简代码，更易于阅读，更易于维护。

fiddle

http://jsfiddle.net/8pgrD/