Question

我有一个像这样的AJAX函数：

function change_session(val) {
    var change_session_id=document.getElementById('select_path').value;
      $.ajax({
                type: "GET",
                url: "/change_path/",
                async: false,
                data: {change_session_id:change_session_id},
                success: function(data){
                    document.getElementById('transfer1').innerHTML=data;
                    document.getElementById('transfer1').style.display="block";
                }
            });

}

我在选择语句中应用AJAX：

<select onchange="change_session()" name="select_path" id="select_path">

              <option name="server_id" id="select_path" value="{{ i.id }}">{{ active }}</option>
              {% for i in session_info %}
              <option name="server_id" id="select_path" value="{{ i.id }}">{{ i.session_name }}</option>
               {% endfor %}
               <input type="hidden" id="change_session_id" value="{{ i.id }}" />
            </select>

一切正常，但在更改select语句中的option时，内容需要一段时间才能加载，并且option语句会冻结，直到函数change_path完成。所以我想在加载完成时在div元素中添加消息"Loading"。

Answer 1

您必须将async:false更改为async:true，因为将其设为false不再是异步请求。

在beforeSend块中发送AJAX请求之前，您可以使用JQuery的回调方法执行某些操作，完成后可以使用complete回调来隐藏加载消息。

function change_session(val) {
    var change_session_id=document.getElementById('select_path').value;
      $.ajax({
                type: "GET",
                url: "/change_path/",
                async: false,
                data: {change_session_id:change_session_id},
                beforeSend: function ( xhr ) {    
                     $("#loadingDIV").show();
                },
                success: function(data){
                    document.getElementById('transfer1').innerHTML=data;
                    document.getElementById('transfer1').style.display="block";
                },
                complete : $("#loadingDIV").hide()
            });

}

Answer 2

您应该删除冻结窗口的async:false。然后在你之前进行AJAX调用，在dom中显示加载消息，并在成功时隐藏它：

function change_session(val) {
var change_session_id=document.getElementById('select_path').value;

$("#transfer1").html("Loading...");

  $.ajax({
            type: "GET",
            url: "/change_path/",
            data: {change_session_id:change_session_id},
            success: function(data){

                $('#transfer1').html(data)
                    .css("display", "block");

            }
        });

 }

当已经使用jQuery时，您可以使用jQuery选择器/函数而不是纯JavaScript。：）

Answer 3

一种解决方法是向任何将调用 change_session（val）的DOM元素添加Bootstrap Tooltip，并在单击时显示（潜在）加载时间的消息。

这不是最好的，但如果您认为您的用户已接近点击该条目并将其悬停在该条目上，则您知道该消息将会显示。

Answer 4

jQuery为此内置了一些事件。

/**
 * onAjax -> Loading indicator 
 */
$("body").on({
    ajaxStart: function() { 
        $(this).addClass("loading"); // I mostly use this. It adds a class to the body.
    },
    ajaxStop: function() { 
        $(this).removeClass("loading"); 
    }    
});

所以在css中你可以做类似的事情：

#loading-ind {position:absolute; top:0; left:0; height:100%; width:100%; display:none;}
body.loading #loading-ind {display:block;}

这些CSS规则只是一个例子，重要的属性是显示。其余的你可以设置为你喜欢的任何东西。

但是你可以做各种事情，而不是删除/添加一个类;）在你的情况下，它将添加'loading ..'文本到div。请记住，这些事件会触发所有ajax调用，因此不知道这是否是最佳选择。

Answer 5

css代码：

.loadingMask {  
    background: url(loader.gif) center 50% no-repeat #000000; 
    top:0; 
    left:0; 
    position:fixed; 
    height:100%; 
    width:100%; 
    opacity:0.7;
    filter:alpha(opacity=70); 
    z-index:12030   
 }

此css会为您的网页生成加载叠加层。

背景属性中的

给出任何加载图像路径..您可以使用ajaxload.info Generator生成加载图像。

HTML：

<div class="loadingMask" id="loadingMask" style="visibility: hidden;"></div>

JavaScript：

function change_session(val) {
    var change_session_id=document.getElementById('select_path').value;
      $.ajax({
                type: "GET",
                url: "/change_path/",
                async: false,
                beforeSend :function(){
                    $("#loadingMask").css('visibility', 'visible');
                },
                data: {change_session_id:change_session_id},
                success: function(data){
                    $("#loadingMask").css('visibility', 'hidden');
                    document.getElementById('transfer1').innerHTML=data;
                    document.getElementById('transfer1').style.display="block";
                }
            });

}

如何在AJAX调用中添加loading ..消息？

5 个答案: