在提交表单时显示ajax加载程序图标 [英] display an ajax loader icon when submitting a form

问题描述

我的需要很简单。当用户尝试登录并提交登录表单，我会显示一个ajax加载程序图标（像在www.ajaxload.info生成的）在前台与背景透明和不可点击（像在这 site ）。当服务器完成后，它可以显示下一页或重新显示有错误的旧页面。

My need is very simple. When a user try to log in and submit the login form, i would to display an ajax loader icon (like ones generated at www.ajaxload.info) in foreground with the background transparent and unclickable (like in this site). when the server has finished, it can display the next page or redisplay the old one with the errors.

我该怎么办？

非常感谢你。

推荐答案

使用jQuery
你可以检测表单上的submit事件并采取一些行动，例如：

Using jQuery (which is a great javascript library and has hundreds of uses besides this one) you can detect the submit event on the form and take some action, like this:

$(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(){
            //the request has completed, so fade out the loader and div
            $('#yourAjaxLoader,#unclickableDiv').fadeOut();
        });  
    }); 
});

要获取不可点击的div，请尝试这样的CSS：

To acheive the unclickable div, try some css like this:

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

并将div放在body标签内。当它褪色时，它将在页面的其余部分上方，使其不可点击。

and put the div just inside the body tag. when it is faded in, it will be 'above' the rest of the page, making it unclickable. just put your ajax loading icon inside this div so it will show up, too.

您可以从获取jQuery ：//jquery.comrel =nofollow> http://jquery.com 和我强烈推荐使用它反正，即使不是为此。希望这有助于

You can get jQuery from http://jquery.com and I highly recommend using it anyway, even if not for this. Hope this helps

新的jQuery on c $ c>方法已经有效地替换了 .submit 和 .click / code>，所以我更新了这个例子来反映。更多信息： http://api.jquery.com/on/

The new jQuery on() method has effectively replaced .submit and .click etc since version 1.7, so I've updated this example to reflect that. More info here: http://api.jquery.com/on/

这篇关于在提交表单时显示ajax加载程序图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！