Question

我的主页上有一个搜索框航班搜索（类似于http://www.travelpack.com/）

当您在http://www.travelpack.com/中搜索时，您会看到“我们正在搜索符合您要求的航班。请耐心等待... “屏幕我没有它，我想在我的网站中使用类似的屏幕。

问题是当我从我的主页点击搜索时我正在使用javascript提交表单

document.flight_search.action = 'php/flt-show-availability.php?&s=1&Sort=P';
            document.flight_search.method = 'post';
            document.flight_search.submit();

如何创建类似于旅行包中的加载屏幕。

Answer 1

在jQuery中会显示屏幕，并在ajax调用（告诉appilcation生成结果）之后转发完成，就像那样：

$('.search').click(function(event){
  event.preventDefault();
  $('#loadAnimationWrapper').show();

  $.ajax({
    cache: false,
    async: false,
    type: 'GET',
    url: '/your/callback/url',
    success: function(data) {
      // your forwarding code
    }
 });
});

但是在我的意见中，你提供的示例页面有问题，显示的内容没有在网址中显示，所以，例如，你不能把网址给别人让他看看结果

所以，ajax魔术 - 当然，但要小心。

Answer 2

您可以重定向到结果页面，将结果列表隐藏在包含加载消息的div后面。然后你通过javascript（ajax或类似的）收到结果并在后台建立列表。

当服务器完成搜索后，您的请求就会完成，您可以隐藏包含加载消息的div（例如在回调函数中）。

Answer 3

好吧，您可以通过ajax-request发送表单并等待答案。等待显示装载机。

如果请求成功，您可以采取不同的反应： - 替换内容 - 转到生成的输出页面

搜索后预加载屏幕？

3 个答案: