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()阻止默认表单提交。
将加载消息添加到#content选择器，将html()的内部更改为您要显示的内容。这将导致初始内容成为您的加载消息，然后它将被成功时.load返回的内容替换，或者如果它是错误的话，您必须明确告诉它要替换的内容。 / LI>
简洁代码，更易于阅读，更易于维护。

小提琴

http://jsfiddle.net/8pgrD/

显示“页面加载”消息

1 个答案:

小提琴