Question

嗨伙计们我使用$ .ajax功能将数据发送到服务器，并且通过这种方法我删除了它工作的大部分回发页面，但是我需要一些进度条来向访问者显示有一些进展现在它显示没有显示任何一秒后它显示结果但我认为我的网站需要留言或小图片。我如何用简单的jquery代码实现它？弹出窗口并显示页面正在进行中。

此外，我还需要添加一些其他jquery以防止在进展过程中发生其他点击吗？

Answer 1

您可以执行类似

的操作

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

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

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

此处使用complete事件，因为在ajax请求成功/失败的情况下调用此事件。

EDITED 你可以做点什么

<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>
    .............
    .............
    .............

然后在剧本

function showBlocker(){
    $(".blocker .img").css({
        top: $(window).height() / 2,
        left: $(window).width() / 2
    });
    $(".blocker").show().css({
        height: $(document).height()
    });
}

然后调用showBlocker()方法显示阻止程序。

您可以调整答案以满足您的需求。这只是一个如何实现的样本

Answer 2

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

像

这样的东西

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

$ .Ajax使用jquery发送进度条

2 个答案: