jquery - 将加载图像添加到 jquery ajax 帖子中

Question

我有以下 javascript 通过 ajax 发布表单而不刷新屏幕。由于帖子需要一段时间，我想在处理过程中添加加载图像。

我明白了this article但它似乎只列出 .load() 或 .get() 而不是 $.post。

<script type="text/javascript">
    $(document).ready(function() {
        $('#contact form').live('submit', function() {

            $.post($(this).attr('action'), $(this).serialize(), function(data) {

                $("#contact").replaceWith($(data));

            });
            return false;
        });
    });
</script>

Answer 1

只需添加一些调用来隐藏/显示您的加载屏幕/div，无论如何:

<script type="text/javascript">
    $(function() {
        $('#contact form').live('submit', function() {
            $("#Loading").fadeIn(); //show when submitting
            $.post($(this).attr('action'), $(this).serialize(), function(data) {
                $("#contact").replaceWith($(data));
                $("#Loading").fadeOut('fast'); //hide when data's ready
            });
            return false;
        });
    });
</script>

<div id="Loading">I'm loading, image here, whatever you want</div>