jQuery Loader在Ajax調用上

Question

我現在可以使加載程序也可以與代碼一起使用-但它不能替換並調用URL。 因此，應該在searchable中調用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保羅愛爾蘭有一個很好的解釋在這里。

• 從jq 1.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示例。