添加加载图像到jQuery的阿贾克斯后 [英] Adding a loading image to a jquery ajax post

问题描述

我有以下的javascript通过AJAX来发布表单，而无需刷新屏幕。由于岗位需要一点时间，我想在加工过程中添加加载图像。

我看到这篇文章但它似乎只名单.load（）或获得（），而不是$。员额。

 ＆LT;脚本类型=文/ JavaScript的＆GT;
    $（文件）。就绪（函数（）{
        $（'＃联系表）。住（'提交'，函数（）{

            $。员额（$（本）.attr（行动），$（本）.serialize（），功能（数据）{

                $（＃联系人）replaceWith（$（数据））;

            }）;
            返回false;
        }）;
    }）;
＆LT; / SCRIPT＆GT;
 

解决方案

只需添加了几个电话来隐藏/显示您的加载屏幕/ DIV，无论：

 ＆LT;脚本类型=文/ JavaScript的＆GT;
    $（函数（）{
        $（'＃联系表）。住（'提交'，函数（）{
            $（＃加载）淡入（）。提交时//秀
            $。员额（$（本）.attr（行动），$（本）.serialize（），功能（数据）{
                $（＃联系人）replaceWith（$（数据））;
                $（＃加载）淡出（快）。 //隐藏在数据的准备
            }）;
            返回false;
        }）;
    }）;
＆LT; / SCRIPT＆GT;

＆LT; D​​IV ID =加载＆GT;我加载，形象在这里，无论你想和LT; / DIV＆GT;
 

i have the following javascript to post a form through ajax without refreshing the screen. Since the post take a little while, i wanted to add a loading image during processing.

I see this article but it seems to only list .load() or .get() but not $.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>

解决方案

Just add a few calls to hide/show your load screen/div, whatever:

<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>

这篇关于添加加载图像到jQuery的阿贾克斯后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！