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

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 不再是异步请求。

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

}