Javascript ajax调用上的jQuery加载程序

我现在也可以让加载器处理代码了——但它不会在中替换并调用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> 

加载


函数myFunction（）{
$（'.searchtable'）.addClass（'hide'）；
$（'.spinner'）.removeClass（'hide'）；
$.ajax({
url:'hotels/hotelSortBy.php？name=&arrival=&deviation=&guests=&guests='
})
.done（函数（）{
$（'.spinner'）.addClass（'hide'）；
$（'.searchtable'）.removeClass（'hide'）；
});
}

我想提出一些建议：

• 不要使用ID，使用类

• 不要使用

  .hide

  和

  show

  保罗·爱尔兰有一个很好的解释

• 由于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示例

所有CSS、HTML都在工作，因为我让微调器一直显示。您不使用$.ajax有什么原因吗？不起作用。代码现在是

function myFunction（）{$（'.search table'）.addClass（'hide'）；$（'.spinner bar'）.removeClass（'hide'）；$.ajax（{url:'hotels/hotelSortBy.php？name=&arrival=&deation=&guests='））.done（function（）{$（'.spinner bar'）.addClass（'hide'）；$（'search table'））.removeClass（'hide'）；$）；}

根据css类的

函数myFunction（）{$（'.searchtable'）.addClass（'hide'）；$（'.spinner bar'）.removeClass（'hide'）；$.ajax（{url:'hotels/hotelSortBy.php？name=&arrival=&deation=&guests='））。完成（函数（）{$（'.spinner bar'）.addClass（'hide'）；$（'searchtable'）。removeClass（'hide'））}）；}

什么特别不起作用？JS非常直截了当。那条路怎么了？为什么它有一堆php变量和echo语句？这是呈现静态资源之前的样子，还是尝试使用该特定路径/端点？如果是后一种情况，我可以告诉你，那是行不通的。如果您使用的是chrome浏览器，请在浏览器中安装postman，并确保endpoint正在执行您认为正确的操作。现在我让加载程序工作，但它不会调用url。请检查顶部的代码。加载器可以工作，但URL不会被调用并替换为css类。