ajax调用上的jQuery Loader - jQuery Loader on ajax call

jQuery Loader on ajax call

本文关键字：jQuery Loader 调用 ajax | 更新日期: 2023-11-24

我现在也可以让加载程序处理代码，但它不会替换并调用URL。因此，ajax url调用应该在searchable:中调用

<button onclick="myFunction()">LOAD</button><br /><br />
<div class="spinner bar hide">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="searchtable"><?php include 'hotels/hotelList.php';?></div>
<script>
function myFunction() { 
$('.searchtable').addClass('hide');
$('.spinner').removeClass('hide');
$.ajax({
url: 'hotels/hotelSortBy.php?name=<?php echo $name;?>&arrival=<?php echo $arrival;?>&departure=<?php echo $departure;?>&guests=<?php echo $numberOfGuests;?>'
})
.done(function() {
$('.spinner').addClass('hide');
$('.searchtable').removeClass('hide');
});
}
 </script>

我会提出一些建议：

不要使用id，使用类。
不要使用.hide&.show Paul Irish在这里有一个很好的解释。
由于jq1.7，您实际上不应该使用.bind()。
我建议使用.ajax()代替.load()，请参阅文档

那么你的功能看起来就像

function myFunction() {
  $('.search-table').addClass('hide');
  $('.spinner').removeClass('hide');
  $.ajax({
    url: 'path/to/endpoint'
  })
  .done(function() {
    $('.spinner').addClass('hide');
    $('.search-table').removeClass('hide');
  });
}

在这里使用jsbin示例。