Сегодня, мы рассмотрим, как можно сделать прелоадер. Прелоадер будет появляться, при отправке данных из формы. Для работы нам понадобятся: jQuery и собственно, сама картинка прелоадера. Картинку можно взять осюда — http://preloaders.net/.
Мне понравилась вот такая:
Ок, картинку выбрали и даже не забыли, что нужно будет подключить jQuery. Теперь, можно приступать к созданию формы и кода, отвечающего за работу прелоадера. Форма будет простая, с 3 полями: Имя, Почта и Комментарии. Данные из формы будут передаваться в файл ajax.php.
Создаем файл index.php, с таким содержанием:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(function() { $('#submit').click(function() { //Добавляем нашу картинку в <div id="container"> $('#container').append('<img src="jquery-preloader.gif" alt=Загрузка..." id="loading" />'); var name = $('#name').val(); var email = $('#email').val(); var comments = $('#comments').val(); //Передаем данные в файл ajax.php $.ajax({ url: 'ajax.php', type: 'POST', data: 'name=' + name + '&email=' + email + '&comments=' + comments, success: function(result) { $('#response').remove(); $('#container').append('<p id="response">' + result + '</p>'); $('#loading').fadeOut(500, function() { $(this).remove(); }); } }); return false; }); }); </script> <style> label { display: block; } </style> <form action="" method="post"> <div id="container"> <label for="name">Имя</label> <input type="text" name="name" id="name" /> <label for="email">Почта</label> <input type="text" name="email" id="email" /> <label for="comments">Комментарии</label> <textarea rows="5" cols="30" name="comments" id="comments"></textarea> <br /> <input type="submit" name="submit" id="submit" value="Отправить" /> </div> </form> |
Давайте разберем более подробно некоторые моменты, относительно работы скрипта. После нажатия кнопки, мы добавляем нашу картинку в див с id=»container». После этого передаем данные в файл ajax.php.
1 2 3 4 5 6 7 8 9 10 11 12 13 | $.ajax({ url: 'ajax.php', type: 'POST', data: 'name=' + name + '&email=' + email + '&comments=' + comments, success: function(result) { $('#response').remove(); $('#container').append('<p id="response">' + result + '</p>'); $('#loading').fadeOut(500, function() { $(this).remove(); }); } }); |
Ответ, из скрипта ajax.php, возвращается в параграф p c id=»response». После того, как получили данные, применяем к нашей картинке прелоадеру эффект fadeOut и удаляем её.
Создадим файл принимающий данные из формы. Содержимое файла ajax.php будет следующим:
1 2 3 4 5 | <?php //Добавляем/извлекаем данные из БД //Выводим сообщение о том, что комментарий добавлен echo "Комментарий добавлен"; ?> |
Думаю, с последним скриптом у вас не должно возникнуть осложнений. Скачать готовую версию можно здесь.
- Русско-английский переводчик, с помощью Google AJAX Language API
- jQuery: полезные примеры, при работе с DOM
- jQuery: делаем формы интерактивными
- jQuery JSON: получаем данные из твиттера
- Выделение всех элементов checkbox с помощью jQuery
Теги: jQuery, Полезные скрипты
Да, популярная штука. Картинки для прелоадеров я всегда беру с ajaxload.info
Reply
Я тоже постоянно пользуюсь ей.
Код пишу, в принципе, точно такой же как в этом примере.
Reply
Жаль валидации нет. Я всегда юзаю плагин jquery.from and jquery.validation
Потрясно работает.
Ну а если нет ЯС, то делаю все на серверной части.
Reply
не знаю как дела обстояли на 2010 год, но сейчас можно сделать всё гораздо проще
$.ajax({
beforeSend: function() { // показываем лоадер},
complete: function() { // по окончании запроса прячем лоадер}
})
Reply