Question

我当前的index.php页面格式如下：

<?php include ("header.php") ?>

Here is the page content

<?php include ("footer.php") ?>

我在header.php中有一个搜索表单，其中的搜索操作search.php，search.php与上面的格式相同。点击提交后，search.php由于其内容需要一段时间才能加载。我想用ajax用搜索内容替换索引内容，在搜索内容加载时显示图像（loading.gif）;正如我见过的其他网站。

这基本上是因为我的访问者知道该页面实际上已加载，他们无需再次点击提交按钮大声笑。

所以看到我对ajax没有真正的了解，我非常欣赏一些方向，任何帮助都会非常感激：）

Answer 1

好吧，我一直在玩，找到了这个解决方案。

<script type="text/javascript">

function ajax_request() {
  $('#content').html('<img src="images/ajax-loader.gif" />');
  $('#content').load("search.php");
}

</script>

ajax_request（）函数的第一行将<div id="content">的html设置为加载图像，然后第二行将search.php中的内容加载到div中。

要触发此功能，我将onclick="ajax_request()"添加到我的提交按钮。

由于AJAX请求在加载图像之前完成，我发现图像最初没有显示，因此我使用了预加载图像，因此它立即从缓存中显示。我使用纯粹的css通过将#preload { display: none; }添加到我的主样式表然后在 <div id ="content">之前插入图像来完成此操作。

<div id="preload"> <img src="images/ajax-loader.gif" width="1" height="1"/> </div>

希望将来帮助其他人：）

Answer 2

可以使用一些jQuery轻松完成。

$('#yourForm').submit(function()
{
    // Put your loading code here...
}

在表单提交上使用ajax页面加载器？

2 个答案: