Question

我的需求非常简单。当用户尝试登录并提交登录表单时，我会在前台显示ajax加载程序图标（如在www.ajaxload.info上生成的图标），背景透明且无法点击（如此site）。当服务器完成后，它可以显示下一页或重新显示带有错误的旧页面。

我该怎么做？

非常感谢你。

Answer 1

使用jQuery（这是一个很棒的JavaScript库，除此之外还有数百个用途）您可以在表单上检测提交事件并采取一些操作，如下所示：

$(function(){  
 $('#yourFormId').on('submit', function(e){
        //stop the form refreshing the page
        e.preventDefault();

        //serialize the form for submission to the server
        var data = $(this).serialize();
        //get the url for the form
        var url = $(this).attr('action');

        //make an ajax request to submit the form, showing the loader and unclickable div
        $('#yourAjaxLoader,#unclickableDiv').fadeIn();
        $.post(url, data, function(response){
            //the request has completed, so fade out the loader and div
            $('#yourAjaxLoader,#unclickableDiv').fadeOut();
        });  
    }); 
});

要获得无法点击的div，请尝试这样的css：

/*css*/    
#unclickableDiv
{
    z-index:99999;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    background-color: black;
    display:none;
}

并将div放在body标签内。当它被淡入时，它将在页面的其余部分“上方”，使其无法点击。只需将你的ajax加载图标放在这个div中，这样它就会显示出来。

你可以从http://jquery.com获得jQuery，我强烈建议你使用它，即使不是这样。希望这有帮助

更新

自版本on()以来，新的jQuery .submit方法已有效地替换了.click和1.7等，因此我更新了此示例以反映这一点。更多信息：http://api.jquery.com/on/

Answer 2

您可以使用JQuery并查看Throbber插件（http://plugins.jquery.com/plugin-tags/throbber）：

提供简单方便的方法来通知用户在后台加载和处理请求，以便他们知道他们已收到操作并且页面尚未冻结。只需使用$ .loading（）或$（'＃foo'）打开或关闭消息（或图像或任何元素）.loading（）。该插件为您处理消息的创建和定位以及“脉冲”。它还提供了一个“掩码”选项，用于在加载消息（或图像或任何元素）运行时阻止UI（在调用级别）。

提交表单时显示ajax加载程序图标

2 个答案:

更新