如何使用 ajax 添加简单的 jquery 加载器/微调器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19420122/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add simple jquery loader/spinner using ajax?
提问by Jerielle
I just need a little help here about adding a simple loader/spinner in my form. I have a search form in my jquery. I want to include a loader/spinner image while the search is on process. After the process is done the loader will be not visible again.
我只需要一些关于在我的表单中添加一个简单的加载器/微调器的帮助。我的 jquery 中有一个搜索表单。我想在搜索过程中包含一个加载器/微调器图像。该过程完成后，加载程序将不再可见。
Here's my code, by the way I am using CodeIgniter.
这是我的代码，顺便说一下我使用的是 CodeIgniter。
Here's my code when the search button is clicked:
这是单击搜索按钮时我的代码：
//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()
},
});
});
Here's the search form
这是搜索表单
<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>
回答by Ajith S
You could do as,
你可以这样做，
HTML
HTML
<div class="loader">
<center>
<img class="loading-image" src="loading.jpg" alt="loading..">
</center>
</div>
CSS
CSS
.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;
}
In you js
在你 js
Before the ajaxcall as,
在ajax调用之前，
$.ajax({
// your ajax code
beforeSend: function(){
$('.loader').show()
},
complete: function(){
$('.loader').hide();
}
});
回答by Sohil Desai
try this code.
试试这个代码。
$.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.
}
});
refer this link to get more details. Ajax Events
请参阅此链接以获取更多详细信息。 阿贾克斯事件
回答by Sudhir Bastakoti
you need to create imgtag and add your imageas its src, like
您需要创建img标签并将您的添加image为它的src，例如
var image = "<?php echo base_url(). 'resources/loading/loading43.gif'; ?>";
$('#loading').html("<img src='"+image+"' />");
..
and on success response,
并在成功响应时，
$('#loading').html("").hide();
回答by Praveen
You can even make it too simple like
你甚至可以让它太简单
- Before the
ajaxstarts, show the loader gif image. - Once the
ajaxreturns response, hide the loader gif image.
- 在
ajax开始之前，显示加载器 gif 图像。 - 一旦
ajax返回响应，隐藏加载程序 gif 图像。
1) Conside you have an imgtag(for eg: className be loader) place in the area where the loader you need (by default display: nonethis image).
1) 假设您有一个img标签（例如： className be loader）放置在您需要加载器的区域（默认情况下display: none为该图像）。
To generate loader gif, try this ajaxloaderonline tool.
要生成加载器 gif，请尝试使用此ajaxloader在线工具。
$('.loader').show();
// your ajax
$('.loader').hide();
