Question

这是我的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)));
            });
        }
    });
});

现在我想在UI上显示一条消息，如“请稍候......”或“加载数据”，直到ajax完全运行。这怎么可以实现？

Answer 1

一种方法是制作一些隐藏的div（例如），然后在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();
                 }
            }); 

});

Answer 2

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

Answer 3

调用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();
         } 
    });
});

来源：http://api.jquery.com/jQuery.ajax/

显示请等待...从服务器获取数据时的消息

3 个答案: