显示“页面加载”消息

我试图在 html 页面中显示用于“页面加载”的图像（.gif），直到显示 my_script.py 的输出，但我不知道该怎么做。This http://jsfiddle.net/9X4gW/这是我到目前为止所得到的。提前谢谢了。

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();
        }
    });

您的脚本可以简化为：

$(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/ http://jsfiddle.net/8pgrD/