Using ajax page loader on form submit?

My current index.php page format is as follows:

<?php include ("header.php") ?>开发者_Python百科

Here is the page content

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

I have a search form within header.php which actions search.php, search.php is the same format as above. After clicking submit search.php takes a little while to load due to its contents. I would love to use ajax to substitute the index content with the search content, displaying an image (loading.gif) whilst the search contents load; as I've seen other websites.

This is basically so my visitors know the page is in-fact loading and they need not click the submit button again lol.

So seeing as I have no real knowledge of ajax I'd very much appreciate some direction, any help would be much appreciated :)

Well I've been playing around and found this solution.

<script type="text/javascript">

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

</script>

The first line in the ajax_request() function sets the html of <div id="content"> to the loading image, the second line then loads the content from search.php into the div.

To trigger the function I added onclick="ajax_request()" to my submit button.

I found the image wasn't showing at first due to the AJAX request being completed before the image loaded, so I used pre-loading for the image so it appears immediately from the cache. I did this using purely css by adding #preload { display: none; } to my main stylesheet and then inserting that div with the image before <div id ="content"> like below.

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

Hope this helps someone else in the future :)

It can be easily done using some jQuery.

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