搜索后预加载屏幕？

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调用（告诉应用程序生成结果）完成后继续前进，就像这样：

$('.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
    }
 });
});

但是在“我的观点”中，您提供的示例页面存在以下问题：所显示的内容未在URL中表示，因此，例如，您无法将URL提供给其他人以使他看到结果。

所以，阿贾克斯魔术-当然，但是要小心。

Answer 2

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

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

Answer 3

好了，您可以通过ajax-request发送表单并等待答案。 等待显示加载程序时。

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