Динамическое обновление контента (без перезагрузки страницы AJAX jQuery)

Раздел языка JavaScript.
Аватара пользователя
Slash
Администратор
Сообщения: 2031
Поблагодарили: 62 раза

Динамическое обновление контента (без перезагрузки страницы AJAX jQuery)

Сообщение Slash » Ср окт 28, 2015 11:20 pm

Здравствуйте.
Потребовалось постоянное обновление одного блока страницы, без перезагрузки самой страницы, на мой взгляд лучшее решение это использовать AJAX. Вот как я сделал обновляющий блок:
В шапку сайта подключил jQuery:

Код: Выделить всё

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

Строчкой ниже написал небольшой JS:

Код: Выделить всё

<script type="text/javascript">
function mode() {
    $.ajax({
        url: 'mode.php',
        success: function(data) {
            $('#display').html(data);
        }
    });
}

var timeInterval = 10000;
setInterval(mode, timeInterval);
</script>

В шаблоне странице, там, где мне нужен самообновляющийся блок добавляю DIV:

Код: Выделить всё

<div id="display"></div>

Вот и все, теперь блок работает, как и было задумано!
Что же за строки кода я такие тут нагородил?
Думаю,что про подключенный файл jquery.min.js объяснять не стоит, тут и так понятно. Вот дальше я создал функцию JS mode(), которая вызывает функцию $.ajax() с набором определенных параметров. И так, первый параметр:

Код: Выделить всё

        url: 'mode.php',

Данный параметр обращается к файлу mode.php, в котором генерируется контент для блока. Далее:

Код: Выделить всё

        success: function(data) {
            $('#display').html(data);
        }

Этот параметр (success) записывает в контейнер сгенерированный контент, если конечно запрос прошел успешно. Контейнером в данном примере является display, то есть:

Код: Выделить всё

<div id="display"></div>

Далее две строчки:

Код: Выделить всё

var timeInterval = 10000;
setInterval(mode, timeInterval);

Функции setInterval() вызывает функцию mode(), каждые десять секунд (10000, это время является значением переменной timeInterval). Одна секунда равняется числу - 1000.

Читайте ещё: Ajax на чистом JavaScript
Спасибо за внимание.
Реклама
Аватара пользователя
Slash
Администратор
Сообщения: 2031
Поблагодарили: 62 раза

Re: Динамическое обновление контента (без перезагрузки страницы AJAX jQuery)

Сообщение Slash » Пт ноя 06, 2015 3:47 pm

Хочу показать ещё один пример ajax запроса в функции mode() (из первого поста):

Код: Выделить всё

function mode() {
    $('#display').load('mode.php');
}

Здесь так же, как и в примере из первого поста результат выполнения сценария в файле mode.php, будет загружен в контейнер display, в блок <div>.
Тут так же можно заставить функцию mode() делать запрос через определенное время, для получения нового контента:

Код: Выделить всё

var timeInterval = 10000;
setInterval(mode, timeInterval);

Вернуться в «JavaScript»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость