Jquery 请稍候。。。从服务器提取数据时的消息

下面是我的jQuery，它根据状态获取分支信息

$("#state").change(function () {

    var state = $("#state").val();
    $.ajax({
        async: false,
        type: 'GET',
        url: '../getBranches',
        data: {
            state: state
        },
        success: function (html) {

            var branch = $("#branch");
            branch.find('option').remove();
            branch.append($('<option/>').val("").text("----Select"));
            if (html == "") {
                return false;
            }
            var opts = html.split(',');
            $.each(opts, function (i, opt) {
                branch.append(
                $('<option/>').val(jQuery.trim(opt)).text(jQuery.trim(opt)));
            });
        }
    });
});

$（“#状态”）.change（函数（）{
var state=$（“#state”）.val（）；
$.ajax({
async:false，
键入：“GET”，
url:“../GetBranchs”，
数据：{
州：州
},
成功：函数（html）{
var分支=$（“#分支”）；
find（'option'）.remove（）；
branch.append（$（“”）.val（“”.text（--Select））；
如果（html==“”）{
返回false；
}
var opts=html.split（'，'）；
$。每个（选项，功能（i，选项）{
分支。追加(
$（''）.val（jQuery.trim（opt））.text（jQuery.trim（opt））；
});
}
});
});

---

现在我想在UI上显示一条消息，比如“请等待…”或“加载数据”，直到ajax完全运行。这是如何实现的？

一种方法是制作一些隐藏的

div

（例如），然后在ajax启动时显示它，在ajax完成时隐藏它，即在ajax回调函数中

<div id="loader" style="display:none;">Loading..please wait</div>

正在加载..请稍候

剧本呢

$("#state").change(function(){
    //show the loading stuff
    $('#loader').show();

          var state = $("#state").val();
          $.ajax({
                 async: false,
                 type: 'GET',
                 url: '../getBranches',
                 data : {state :state} ,
                 success: function(html) {

                        var branch = $("#branch");
                        branch.find('option').remove();
                        branch.append($('<option/>').val("").text("----Select"));
                        if(html == ""){
                            return false;
                        }
                        var opts = html.split(',');
                        $.each(opts, function(i, opt){
                            branch.append(
                                        $('<option/>').val(jQuery.trim(opt)).text(jQuery.trim(opt)));
                        });   
                        //hide the loading stuff
                        $('#loader').hide();
                 }
            }); 

});

$（“#状态”）.change（函数（）{
//显示正在加载的内容
$（“#加载程序”）.show（）；
var state=$（“#state”）.val（）；
$.ajax({
async:false，
键入：“GET”，
url:“../GetBranchs”，
数据：{state:state}，
成功：函数（html）{
var分支=$（“#分支”）；
find（'option'）.remove（）；
branch.append（$（“”）.val（“”.text（--Select））；
如果（html==“”）{
返回false；
}
var opts=html.split（'，'）；
$。每个（选项，功能（i，选项）{
分支。追加(
$（''）.val（jQuery.trim（opt））.text（jQuery.trim（opt））；
});   
//把装的东西藏起来
$（“#加载程序”）.hide（）；
}
}); 
});

一种方法是制作一些隐藏的

div

（例如），然后在ajax启动时显示，在ajax完成时隐藏，即在ajax回调函数中

<div id="loader" style="display:none;">Loading..please wait</div>

正在加载..请稍候

剧本呢

$("#state").change(function(){
    //show the loading stuff
    $('#loader').show();

          var state = $("#state").val();
          $.ajax({
                 async: false,
                 type: 'GET',
                 url: '../getBranches',
                 data : {state :state} ,
                 success: function(html) {

                        var branch = $("#branch");
                        branch.find('option').remove();
                        branch.append($('<option/>').val("").text("----Select"));
                        if(html == ""){
                            return false;
                        }
                        var opts = html.split(',');
                        $.each(opts, function(i, opt){
                            branch.append(
                                        $('<option/>').val(jQuery.trim(opt)).text(jQuery.trim(opt)));
                        });   
                        //hide the loading stuff
                        $('#loader').hide();
                 }
            }); 

});

$（“#状态”）.change（函数（）{
//显示正在加载的内容
$（“#加载程序”）.show（）；
var state=$（“#state”）.val（）；
$.ajax({
async:false，
键入：“GET”，
url:“../GetBranchs”，
数据：{state:state}，
成功：函数（html）{
var分支=$（“#分支”）；
find（'option'）.remove（）；
branch.append（$（“”）.val（“”.text（--Select））；
如果（html==“”）{
返回false；
}
var opts=html.split（'，'）；
$。每个（选项，功能（i，选项）{
分支。追加(
$（''）.val（jQuery.trim（opt））.text（jQuery.trim（opt））；
});   
//把装的东西藏起来
$（“#加载程序”）.hide（）；
}
}); 
});

html

<span id="tempid" style="display:none">please wait...</span>

请稍候。。。

在js中

  $("#state").change(function () {
          var state = $("#state").val();
    $("#tempid").show();// show message
            $.ajax({
                async: false,                 
                type: 'GET',
                url: '../getBranches',
                data: {
                    state: state
                },
                success: function (html) {

                    var branch = $("#branch");
                    branch.find('option').remove();
                    branch.append($('<option/>').val("").text("----Select"));
                    if (html == "") {
                        return false;
                    }
                    var opts = html.split(',');
                    $.each(opts, function (i, opt) {
                        branch.append(
                        $('<option/>').val(jQuery.trim(opt)).text(jQuery.trim(opt)));
                    });
                $("#tempid").hide();// hide message container at the time of success
               }
            });
        });

$（“#状态”）.change（函数（）{
var state=$（“#state”）.val（）；
$（“#tempid”）.show（）；//显示消息
$.ajax({
async:false，
键入：“GET”，
url:“../GetBranchs”，
数据：{
州：州
},
成功：函数（html）{
var分支=$（“#分支”）；
find（'option'）.remove（）；
branch.append（$（“”）.val（“”.text（--Select））；
如果（html==“”）{
返回false；
}
var opts=html.split（'，'）；
$。每个（选项，功能（i，选项）{
分支。追加(
$（''）.val（jQuery.trim（opt））.text（jQuery.trim（opt））；
});
$（“#tempid”）.hide（）；//成功时隐藏消息容器
}
});
});

html

<span id="tempid" style="display:none">please wait...</span>

请稍候。。。

在js中

  $("#state").change(function () {
          var state = $("#state").val();
    $("#tempid").show();// show message
            $.ajax({
                async: false,                 
                type: 'GET',
                url: '../getBranches',
                data: {
                    state: state
                },
                success: function (html) {

                    var branch = $("#branch");
                    branch.find('option').remove();
                    branch.append($('<option/>').val("").text("----Select"));
                    if (html == "") {
                        return false;
                    }
                    var opts = html.split(',');
                    $.each(opts, function (i, opt) {
                        branch.append(
                        $('<option/>').val(jQuery.trim(opt)).text(jQuery.trim(opt)));
                    });
                $("#tempid").hide();// hide message container at the time of success
               }
            });
        });

$（“#状态”）.change（函数（）{
var state=$（“#state”）.val（）；
$（“#tempid”）.show（）；//显示消息
$.ajax({
async:false，
键入：“GET”，
url:“../GetBranchs”，
数据：{
州：州
},
成功：函数（html）{
var分支=$（“#分支”）；
find（'option'）.remove（）；
branch.append（$（“”）.val（“”.text（--Select））；
如果（html==“”）{
返回false；
}
var opts=html.split（'，'）；
$。每个（选项，功能（i，选项）{
分支。追加(
$（''）.val（jQuery.trim（opt））.text（jQuery.trim（opt））；
});
$（“#tempid”）.hide（）；//成功时隐藏消息容器
}
});
});

在调用jQuery

$时，可以使用
beforeSend
选项。ajax

：

HTML

<!-- Somewhere in your page -->
<div id="waitMessage" style="display: none">Please wait...</div>

请稍候。。。

Javascript

$("#state").change(function(){
    var state = $("#state").val();
    $.ajax({
         async: false,
         type: 'GET',
         url: '../getBranches',
         data : {state :state} ,
         success: function(html) {
            var branch = $("#branch");
            branch.find('option').remove();
            branch.append($('<option/>').val("").text("----Select"));
            if(html == ""){
                return false;
            }
            var opts = html.split(',');
            $.each(opts, function(i, opt){ 
                branch.append($('<option/>').val(jQuery.trim(opt)).text(jQuery.trim(opt)));
            }); 

            // Hide message
            $("#waitMessage").hide();
         },

         // What to do before starting
         beforeSend: function () {
             $("#waitMessage").show();
         } 
    });
});

$（“#状态”）.change（函数（）{
var state=$（“#state”）.val（）；
aja女士