javascript - ajax 调用上的 jQuery 加载器

Question

我现在可以让加载器也使用代码 - 但它不会替换并调用 URL。所以 ajax url 调用应该在可搜索中调用:

<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> 

Answer 1

我会提出一些建议:

• 不要使用 id，使用类。

• 不要使用 .hide 和 .show Paul Irish 有一个很好的解释 here.

• 从 jq 1.7 开始，您真的不应该使用 .bind()。

• 我建议使用 .ajax() 代替 .load() see docs

那么你的函数看起来就像这样

function myFunction() {

  $('.search-table').addClass('hide');
  $('.spinner').removeClass('hide');

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

}

工作 jsbin 示例 here.