Используя загрузчик страниц ajax в форме отправки?

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), пока загружается содержимое поиска;как я видел другие сайты.

Это в основном так, чтобы мои посетители знали, что страница фактически загружается, и им не нужно нажимать кнопку отправки снова. lol.

Так что, как и янет реального знания 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 () устанавливает html <div id="content"> для загружаемого изображения, вторая строка затем загружает содержимое из search.php в div.

Чтобы вызвать функцию, я добавил onclick="ajax_request()" к моей кнопке отправки.

Я обнаружил, что изображение сначала не показывается из-за того, что AJAX-запрос завершается до загрузки изображения, поэтому я использовал предварительную загрузку для изображения, чтобы оно сразу же появлялось из кэша. Я сделал это, используя чисто CSS, добавив #preload { display: none; } к моей основной таблице стилей, а затем вставив этот div с изображением до <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...
}