оешил сделать сделать так, чтобы при ожидании ответа AJAX-запроса от сервера крутилась анимация (бегающий кружок с надписью "loading...")
Сам в AJAX разбираюсь очень плохо, поэтому решил поискать примеры от старших товарищей. Из того, что нашел, более-менее понятно вот тут:
================================ ======
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
/*описание стилей*/
#loadImg{position:absolute; z-index:1000; display:none}
</style>
</head>
<body>
<!-- содержимое страницы -->
<img id="loadImg" src="img/load.gif" />
</body>
</html>
При старте ajax-запроса покажем изображение с анимацией загрузки в центре страницы, а при получении ответа от сервера скроем эту анимацию:
$.get("/ajaxtest.php", onAjaxSuccess); // - отправим запрос на сервер
startLoadingAnimation(); // - запустим анимацию загрузки
function onAjaxSuccess(data) // - функция завершения запроса
{
stopLoadingAnimation();
// дальнейшая работа с полученными от сервера данными
...
}
function startLoadingAnimation() // - функция запуска анимации
{
// найдем элемент с изображением загрузки и уберем невидимость:
var imgObj = $("#loadImg");
imgObj.show();
// вычислим в какие координаты нужно поместить изображение загрузки,
// чтобы оно оказалось в серидине страницы:
var centerY = $(window).scrollTop() + ($(window).height() + imgObj.height())/2;
var centerX = $(window).scrollLeft() + ($(window).width() + imgObj.width())/2;
// поменяем координаты изображения на нужные:
imgObj.offset(top:centerY, left:centerX);
}
function stopLoadingAnimation() // - функция останавливающая анимацию
{
$("#loadImg").hide();
}
================================ =====
Я наверное слишком деревянный, так как не могу понять, куда это вставлять (начиная с $.get("/ajaxtest.php", onAjaxSuccess); // - отправим запрос на сервер и до конца примера).
И что такое /ajaxtest.php??? Это файл, который будет загружаться после обработки AJAX-запроса или что-то ещё?
Я обращаюсь к серверу так:
<span onclick="PostComments('post_comments<?echo $data['Post'];?>', 'post_comments_form<?echo $data['Post'];?>', 'post_comments.php?id_post=<?echo $data['Post'];?>&id=<?echo $id;?>&count_vsego=<?echo $data['LikeCount'];?>')"><?echo $data['LikeCount'];?></span>
т.е. после нажатия на данный span в див <div id="post_comments"> загружается файл post_comments.php
Скрипт, с помощью которого загружаются данные выглядит так:
<script type="text/javascript">
function PostComments(post_comments<?echo $data['Post'];?>,post_comments_form<?echo $data['Post'];?>,url) {
jQuery.ajax({
url: url, //Адрес подгружаемой страницы
type: "POST", //Тип запроса
dataType: "html", //Тип данных
data: jQuery("#"+post_comments_form<?echo $data['Post'];?>).serialize(),
success: function(response) { //Если все нормально
document.getElementById(post_comments<?echo $data['Post'];?>).innerHTML = response;
},
error: function(response) { //Если ошибка
document.getElementById(post_comments<?echo $data['Post'];?>).innerHTML = "Ошибка при отправке формы";
}
});
}
</script>
Если можно, разъясните на пальцах, плз, что куда вставить, чтобы начала работать данная функция (анимация загрузки)...
1. bambr32 - 02 Апреля, 2015 - 22:26:01 - перейти к сообщению
2. nerv - 03 Апреля, 2015 - 00:23:50 - перейти к сообщению
учись заключать код в теги
3. lastdays - 03 Апреля, 2015 - 07:51:17 - перейти к сообщению
Рисунок загрузки изначально нужно скрыть, добавляем display:none;
<img id="loadImg" src="img/load.gif" style="display:none;"/>
<input type="button" id="send" value="Отправить">
<img id="loadImg" src="img/load.gif" style="display:none;"/>
<input type="button" id="send" value="Отправить">
CODE (javascript):
скопировать код в буфер обмена
скопировать код в буфер обмена
- //- Отправляем аякс запрос при клике на кнопку "отправить".
- $( "#send" ).click(function() {
- //- Показываем индикатор загрузки
- $('#loadImg').show();
- $.ajax({
- type : 'POST',
- url: "ajax.php",
- data: {
- firstname : 'имя',
- lastname : 'фамилия',
- },
- dataType: 'html',
- success: function(data){
- //- скрываем индикатор загрузки
- $('#loadImg').hide();
- },
- error : function(request,error){
- console.log(request,error);
- }
- });
- });
Можно искусственную задержку делать c помощью функции setTimeout, например и показывать загрузку, пока она отработает.