如何使用ajax添加简单的jquery加载程序/微调器？

我只是需要一些帮助，在我的表单中添加一个简单的加载器/微调器。 我的jquery中有一个搜索表单。我想在搜索过程中包含一个加载器/微调器图像。完成该过程后，加载程序将不再可见

这是我的代码，顺便说一下，我正在使用CodeIgniter

单击搜索按钮时，以下是我的代码：

//search
        $('#search-btn').on('click',function(){

            var query = $("#keyword").val();

            var image = "<?php echo base_url()."/resources/loading/loading43.gif"; ?>";

            $('#loading').html(' + image + ');

            var query_url = "<?php echo site_url('item_controller/searchItem'); ?>";

            $.ajax({

                type:'POST',
                url: query_url,
                data:{query: $("#keyword").val()},
                dataType:'json',
                async: false,
                success:function(d){

                    //$('.display').dataTable().fnDestroy( true );

                    $("#example tbody").html(""); //HERE'S MY PROBLEM, DOESN'T DISPLAY LOADER WHEN SEARCHING

                    for(i in d){

                        $("#example tbody").append("<tr><td style='text-align: center; color:' data-code='TRUE'>" + d[i]['item_code'] + "</td><td style='text-align: left' data-name='TRUE'>" + d[i]['item_name'] + "</td><td><div style='text-align: center'><input type='button' value='ADD' class='k-button' id='" + d[i]['item_code'] + "' data-item=TRUE /></div></td></tr>");

                    }

                    //$("#search_result").show('blind');

                    $("[data-item]").on('click',function(){

                        var code = $(this).parents('tr').find('[data-code]').html();
                        var name = $(this).parents('tr').find('[data-name]').html();
                        // console.log(code,name);
                        $("#grid1 tbody").append("<tr><td style='text-align: center; width: 20%'><input type='text' value=" + code + " readonly style='width:50px; background-color: transparent; border-style: none' id=code" + counter_code++ +" /></td><td style='text-align: center; width: 40%'><input type='text' style='width: 90%; background-color: transparent; border-style: none' value='" + name + "' id=item"+ counter_item++ +" readonly /></td><td style='text-align: center'><input type='text' name='qty[]' id=qty"+ counter_qty++ +" style='text-align: center; width: 50px;' /></td><td style='text-align: center'><div align='center'><select style='width:100px; display: block' name='unit[]' id=unit"+ counter_unit++ +" ><option value=''>----</option><option value='pc/pcs'>PC/PCS</option><option value='BOX/BOXES'>BOX/BOXES</option></select></div></td><td style='text-align: center'><input type='text' name='price[]' id=price"+ counter_price++ +" style='text-align: right; width: 100px;' onblur='' /></td><td style='text-align: center'><input type='text' name='total[]' id=total"+ counter_total++ +" style='font-family: courier; text-align: right; background-color: lightgray; color: red; width: 100px;' readonly='readonly' value='' /></td></tr>");

                        ComputeTotal();

                    });

                    $('.display').dataTable({
                        "bPaginate": true,
                        "bLengthChange": true,
                        "bFilter": true,
                        "bSort": true,
                        "bInfo": true,
                        "bAutoWidth": false,
                        "bDestroy": true,
                        "bJQueryUI": false,
                        "bRetrieve": true,
                        "sPaginationType": "full_numbers",
                        "iDisplayLength": 25,
                        "destroy": true
                    });

                    //$('.display').dataTable().fnDestroy(true);

                    //$('.display').children().remove()

                },

            });    

        });

//搜索
$（'search btn'）。在（'click'，function（）上{
var query=$（“#关键字”）.val（）；
var image=“”；
$（'#加载'）.html（'+image+'）；
var query_url=“”；
$.ajax({
类型：'POST'，
url:query\uURL，
数据：{query:$（“#关键字”）.val（）}，
数据类型：'json'，
async:false，
成功：功能（d）{
//$（'.display'）.dataTable（）.fnDestroy（true）；
$（“#示例tbody”）.html（“”；//这是我的问题，搜索时不显示加载程序
对于（d中的i）{
$（“#示例tbody”）.append（“+d[i]['item_code']+”“+d[i]['item_name']+”）；
}
//$（“#搜索结果”）.show（'blind'）；
$（“[数据项]”）。在（'单击'，函数（）上）{
var code=$（this.parents（'tr'）.find（'[data code]'））.html（）；
var name=$（this.parents（'tr'）.find（'[data name]'））.html（）；
//console.log（代码、名称）；
$（“#grid1 tbody”）.append（--PC/PCSBOX/box）；
计算总数（）；
});
$（'.display'）.dataTable({
“bPaginate”：对，
“bLengthChange”：正确，
“bFilter”：没错，
“bSort”：正确，
“宾福”：没错，
“bAutoWidth”：假，
是的，
“bJQueryUI”：错，
“bRetrieve”：没错，
“sPaginationType”：“完整编号”，
“iDisplayLength”：25，
“毁灭”：真的吗
});
//$（'.display'）.dataTable（）.fnDestroy（true）；
//$（'.display'）.children（）.remove（）
},
});    
});

这是搜索表

<div id="loading"></div>

<div id="search_result" class="k-content">
     <div class="k-header" id="item-view-list" align="center">

        <table border="0" style="width: 80%; align: left" cellpadding="10" cellspacing="10" align="left">
            <tr>
                <td colspan="3">
                    <h5>SEARCH ITEM</h5>
                </td>
            </tr>
            <tr>
                <td style="width: 3%">
                    <label>Name/Description</label>
                </td>
                <td style="width: 40%">
                    <input type="text" name="keyword" id="keyword" style="width: 80%" /> <input type="button" value="SEARCH" id="search-btn" class="k-button" style="font-size: 12px" />
                </td>
            </tr>
        </table>

        <hr />

        <table cellpadding="0" cellspacing="0" border="0" class="display" id="example" style="font-size:small; width: 100%">
            <thead>
                <tr>

                </tr>
                <tr>
                    <th>CODE</th>
                    <th>NAME/DESCRIPTION</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
        <br />

    </div>
</div>

搜索项
姓名/说明

代码
姓名/说明

您需要创建

img

标记，并将您的

图像添加为其
src
，如

var image = "<?php echo base_url(). 'resources/loading/loading43.gif'; ?>";
$('#loading').html("<img src='"+image+"' />");
..

你甚至可以把它做得太简单，比如

在ajax开始之前，显示加载程序的gif图像
一旦ajax返回响应，隐藏加载程序gif图像

1） 考虑到你有一个
img
标签（例如：className be
加载程序）放在你需要加载程序的区域（默认情况下
显示：无
此图像）

要生成加载程序gif，请尝试此联机工具

$('.loader').show();
// your ajax
$('.loader').hide();

试试这个代码

$.ajax({
    type:'POST',
    url: query_url,
    data:{query: $("#keyword").val()},
    dataType:'json',
    async: false,
    success:function(d){
        // Your code.
    },
    beforeSend: function(){
        // Code to display spinner
    },
    complete: function(){
        // Code to hide spinner.
    }
});

请参阅此链接以获取更多详细信息。
你可以这样做

HTML

<div class="loader">
   <center>
       <img class="loading-image" src="loading.jpg" alt="loading..">
   </center>
</div>

在你
js

在
ajax
调用as之前

$.ajax({
  // your ajax code
  beforeSend: function(){
       $('.loader').show()
   },
  complete: function(){
       $('.loader').hide();
  }
});

HTML
全球事件
您可以通过将全局evet设置为
false
来禁用特定ajax的全局evet

如果在本地进行检查，则可以在浏览器中使用这些设置在加载页面时查看文本/图像


.loading-image {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
}
.loader
{
    display: none;
    width:200px;
    height: 200px;
    position: fixed;
    top: 50%;
    left: 50%;
    text-align:center;
    margin-left: -50px;
    margin-top: -100px;
    z-index:2;
    overflow: auto;
}

$.ajax({
  // your ajax code
  beforeSend: function(){
       $('.loader').show()
   },
  complete: function(){
       $('.loader').hide();
  }
});

<!-- Using a text -->
<div id="loading">Loading...</div>

<!-- Using an image -->
<div id="loading"><img src="loader.svg" alt=""></div>

$.ajax({
    ...
    beforeSend: function(){
        $('#loading').show();
    },
    complete: function(){
        $('#loading').hide();
    }
});

$(document).bind("ajaxSend", function(){
    $('#loading').show();
}).bind("ajaxComplete", function(){
    $("#loading").hide();
});

$.ajax({
    ...
    global: true, // boolean
    ...
});