1

这是我的 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 完全运行。这是如何实现的？

4

3 回答 3

4

一种方法是隐藏一些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();
                 }
            }); 

});
于 2013-10-15T13:36:14.593 回答
0

您可以beforeSend在调用 jQuery 时使用该选项$.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/

于 2013-10-15T13:37:44.643 回答
0

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
               }
            });
        });
于 2013-10-15T13:36:25.103 回答