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

Question

我的需要很简单.当用户尝试登录并提交登录表单时,我会在前台显示ajax加载程序图标(如www.ajaxload.info生成的图标),背景透明且不可点击(如本网站所示).当服务器完成后,它可以显示下一页或重新显示带有错误的旧页面.

我怎样才能做到这一点？

非常感谢你提前.

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 ,我强烈推荐使用它,即使不是这样.希望这可以帮助

更新:

新的jQuery的on()方法已经有效地替换.submit,并.click从版本等等1.7,所以我已经更新了这个例子来反映这一点.更多信息:http://api.jquery.com/on/