2

我有一个这样的 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>

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

4

5 回答 5

6

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

您可以在块中发送 AJAX 请求之前使用 JQuery 的回调方法做一些事情，beforeSend完成后您可以使用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()
            });

}
于 2013-04-15T07:12:34.743 回答
3

您应该删除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。:)

于 2013-04-15T06:43:21.703 回答
1

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 规则只是一个例子，重要的属性是 display。其余的你可以设置为任何你喜欢的。

但是，您可以做各种事情，而不是删除/添加一个类；）在您的情况下，它将向 div 添加“正在加载..”文本。请记住，这些事件会在所有 ajax 调用上触发，所以不知道这是否是最佳选择。

于 2013-04-15T06:50:01.650 回答
1

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";
                }
            });

}
于 2013-04-15T06:51:45.023 回答
1

一种解决方法是向任何将调用change_session(val)的 DOM 元素添加引导工具提示，并在单击时显示有关（潜在）加载时间的消息。

这不是最好的，但是如果您假设您的用户即将单击该条目并因此将鼠标悬停在它上面，那么您知道将显示该消息。

于 2016-02-04T17:25:51.547 回答