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

我的需要很简单。当用户尝试登录并提交登录表单时，我希望在前台显示一个ajax加载程序图标（如www.ajaxload.info中生成的图标），背景透明且不可点击（如下图所示）。当服务器完成后，它可以显示下一页或重新显示包含错误的旧页

我该怎么做

提前非常感谢。

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

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

要获得不可链接的div，请尝试以下css：

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

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

把div放在body标签里面。当它淡入时，它将“位于”页面的其余部分，使其不可读取。只需将ajax加载图标放在这个div中，它也会显示出来

您可以从中获得jQuery，我强烈建议您无论如何都使用它，即使不是为了这个目的。希望这有帮助

更新：

---

新的jQuery

on（）

方法有效地取代了

。提交
和
。从
1.7版开始，单击
等，因此我更新了这个示例以反映这一点。更多信息：
您可以使用JQuery并查看Throbber插件（）：

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

同意w/Maxim-需要更多关于您当前项目的上下文来向您展示解决方案。如果您使用的是jQuery，看起来jammy已经介绍了您……我将使用jQuery，我想在显示ajax加载程序图标后，我需要以ajax样式提交我的登录表单不可链接部分无法工作，我已将div放在正文中，但是它的高度是零，…@JasonHuang 100%宽度和高度依赖于父对象的宽度和高度设置为相同，除非使用位置：绝对。您需要将body标签设置为100%高度，或者将不可拾取的div移动到position:absolute。