Jquery ui $.Ajax使用jquery发送进度条_Jquery Ui_Jquery Plugins_Jquery

Jquery ui $.Ajax使用jquery发送进度条

jquery-ui jquery-plugins jquery

Jquery ui $.Ajax使用jquery发送进度条,jquery-ui,jquery-plugins,jquery,Jquery Ui,Jquery Plugins,Jquery,大家好我使用$.ajax功能将数据发送到服务器，使用此方法，我删除了大部分回发页面。它可以正常工作，但我需要一些进度条来向访问者显示一些进度。现在它什么也不显示。几秒钟后它会显示结果，但我认为我的网站需要一条消息或一张小图片。如何用简单的jquery代码实现它？弹出一些内容，显示页面正在进行中此外，我还需要添加一些其他jquery，以防止在进程中出现其他单击。是否可能？您可以在AJAX调用开始之前显示加载图像，然后将其隐藏在回调函数中差不多 // handler for ajax trig

大家好
我使用$.ajax功能将数据发送到服务器，使用此方法，我删除了大部分回发页面。它可以正常工作，但我需要一些进度条来向访问者显示一些进度。现在它什么也不显示。几秒钟后它会显示结果，但我认为我的网站需要一条消息或一张小图片。如何用简单的jquery代码实现它？弹出一些内容，显示页面正在进行中

此外，我还需要添加一些其他jquery，以防止在进程中出现其他单击。是否可能？

您可以在AJAX调用开始之前显示加载图像，然后将其隐藏在回调函数中

差不多

// handler for ajax trigger
$("#yourelement").click(function(){
    // your loading image object
    $("#yourimage").show();
    $.ajax({
       url: 'ajax/test.html',
       success: function(data) {
         $("#yourimage").hide();
       }
    });
});

$("elemnt").click(function(){
    $("loader-img").show();

    $.ajax({
        url : "your url",
        complete: function(){
            $("loader-img").hide();
        }
    });    
});

<style type="text/css">
    .blocker{
        z-index: 99999;
        opacity: .5;
        height: 100px;
        position: fixed;
        background: none repeat scroll 0 0 lightgrey;
        width: 100%;
    }

    .blocker .img{
        position: fixed;
        color: red;
    }
</style>

<body>
    <div class="blocker" style="display: none">
        <div class="img">img</div>
    </div>
    .............
    .............
    .............

你可以这样做

// handler for ajax trigger
$("#yourelement").click(function(){
    // your loading image object
    $("#yourimage").show();
    $.ajax({
       url: 'ajax/test.html',
       success: function(data) {
         $("#yourimage").hide();
       }
    });
});

$("elemnt").click(function(){
    $("loader-img").show();

    $.ajax({
        url : "your url",
        complete: function(){
            $("loader-img").hide();
        }
    });    
});

<style type="text/css">
    .blocker{
        z-index: 99999;
        opacity: .5;
        height: 100px;
        position: fixed;
        background: none repeat scroll 0 0 lightgrey;
        width: 100%;
    }

    .blocker .img{
        position: fixed;
        color: red;
    }
</style>

<body>
    <div class="blocker" style="display: none">
        <div class="img">img</div>
    </div>
    .............
    .............
    .............

加载程序图像可以是页面阻塞div，以阻止用户对视口中心的图像执行任何操作

这里使用完整事件，因为在ajax请求成功/失败的情况下调用此事件

编辑你可以这样做

// handler for ajax trigger
$("#yourelement").click(function(){
    // your loading image object
    $("#yourimage").show();
    $.ajax({
       url: 'ajax/test.html',
       success: function(data) {
         $("#yourimage").hide();
       }
    });
});

$("elemnt").click(function(){
    $("loader-img").show();

    $.ajax({
        url : "your url",
        complete: function(){
            $("loader-img").hide();
        }
    });    
});

<style type="text/css">
    .blocker{
        z-index: 99999;
        opacity: .5;
        height: 100px;
        position: fixed;
        background: none repeat scroll 0 0 lightgrey;
        width: 100%;
    }

    .blocker .img{
        position: fixed;
        color: red;
    }
</style>

<body>
    <div class="blocker" style="display: none">
        <div class="img">img</div>
    </div>
    .............
    .............
    .............

然后调用

showBlocker（）

方法来显示阻止程序

你可以根据自己的需要调整答案。这只是一个如何实现的示例

用绝对位置阻塞div必须位于页面中心，以防止单击，这是您的意思吗？