jquery — Обновить (перезагрузить) страницу один раз с помощью jQuery? — Qaru

.

Pull to reload — обновление страницы на JavaScript: «потяните, чтобы перезагрузить»

Иногда необходимо перезагрузить часть HTML страницы. Например, обновить изображение-код антиспама, на странице с формой добавления текста. Обновить DIV блок без обновления всей странице можно с помощью Ява-библиотеки —  jQuery.

Первое, что нам нужно будет сделать, это, естественно, подключить сам jQuery.

Библиотека jQuery может находится у Вас на сайте, либо браться непосредственно с сайта проекта jQuery.

jQuery лучше подключать в верхнем блоке между тегами <HEAD> </HEAD>, до тега <BODY>

Теперь пишем часть скрипта отвечающего за перезагрузку DIV (этот код, также, рекомендуется размещать в «шапке» до закрывающего тега </HEAD>):

Этот код объясняется так:
при клике на ссылку с ID newCaptcha в контейнере DIV с ID captcha перезагружается изображение, которое генерируется скриптом captcha.php:

Теперь, при нажатие на ссылку, у нас обновляется код-картинка антиспама.

Поскольку вопрос носит общий характер, попробуем подвести итог возможным решениям для ответа:

Простое решение для JavaScript :

Самый простой способ — это однострочное решение, размещенное соответствующим образом:

То, что многие люди отсутствуют здесь, потому что они надеются получить некоторые «точки», состоит в том, что сама функция reload () предлагает логический параметр (параметр: location.reload() ).

Как сделать перезагрузку страницы через jQuery (JavaScript)?

Метод Location.reload () перезагружает ресурс из текущего URL-адреса. Его необязательный уникальный параметр — это логическое значение, которое, когда оно истинно, заставляет страницу всегда перезагружаться с сервера. Если он неверен или не указан, браузер может перезагрузить страницу из своего кеша.

Это означает, что есть два способа:

Решение1: принудительно перезагрузить текущую страницу с сервера

Решение2: Перезагрузка с кеша или сервера (на основе браузера и вашей конфигурации)

И если вы хотите объединить его с jQuery при прослушивании события, я бы рекомендовал использовать метод «.on ()» вместо «.click» или других оболочек событий, например, более правильным решением было бы:

AJAX и jQuery. Динамическое обновление контента. Основы (изменения от 03.01.2012)

Автор: Михаил Пестречихин
Источник:http://www.codething.ru/ajax.php

В данной статье речь пойдет о том, что же такое AJAX и jQuery и будут рассмотрены примеры, как их использовать.

— инструмент для построения веб-приложений, обменивающихся данными с сервером в фоновом режиме. При этом пользователь получает приложение с динамическим обновлением контента, без перезагрузки всей страницы.

jQuery — JavaScript-framework, библиотека, позволяющая более удобно использовать некоторые возможность Javascript, такие как: создание визуальных эффектов, обработка событий, работа с и поддержка AJAX.

Скачать последнюю версию jQuery и подробно ознакомиться со всеми возможностями можно на сайте разработчика: http://www.jquery.com/

В данной статье мы будем рассматривать только одну функцию библиотеки jQuery, а именно функцию $.ajax(). Эта функция позволяет нам как передавать данные на сервер, так и получать ответы от сервера и все это в фоновом режиме, без перезагрузки страницы. Настройка приема или передачи данных зависит от параметров, с которыми вызывается функция $.ajax(). Основные из них будут рассмотрены ниже. Подробнее о параметрах можно прочесть в руководстве по jQuery.

Перейдем к рассмотрению примеров.

Важно!
Для того, чтобы примеры работали корректно, необходимо:
1. Все файлы должны быть записаны в кодировке UTF-8.
2. Скрипты должны выполняться на веб-сервере, а не запускаться в браузере, как файл.

Пример 1. Динамическое обновление контента по таймеру

Создадим простенькую программу, отображающую текущее время, обновляемое раз в секунду по таймеру. Особенностью данной программы будет получение информации о текущем времени из другого внешнего файла.

Содержимое файла index.html.

В коде имеются несколько особенностей, поясним их.

1. Подключение библиотеки jQuery происходит в заголовке HTML файла, для этого записана данная строка.

<script type=»text/javascript» src=»https://bit-digest.ru/wp-content/uploads/2018/06/39161.jpg»></script> Сам файл jquery.js — находится в той же папке, что и файлы примера.

2. В теле документа создается контейнер, в который мы будем загружать контент.

<div id=»content»></div>

3. Странная, на первый взгляд, функция $(document).ready() требуется для корректной работы jQuery, к тому же в ней мы можем выполнить все приготовления к работе программы.

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

В нашем случае мы вызываем функцию show(), в которой прописан механизм получения контента из другого файла, и настраиваем таймер, так, чтобы функция show() вызывалась один раз в секунду.

4. Функция show() состоит из обращения к функции $.ajax() с определенным рядом параметров, которая позволяет нам в фоновом режиме получить информацию из внешнего файла на сервере.

$.ajax({ url: «time.php», cache: false, success: function(html){ $(«#content»).html(html); } });

Рассмотрим используемые параметры функции $.ajax().

url: «time.php» Обращается к файлу time.php для получения контента. cache: false Результаты запросов не кэшируются. success: function(html){ $(«#content»).html(html); } При успешном выполнении запроса, управление переходит функции, которая получает контент в качестве параметра и записывает его контейнер. Запись в контейнер происходит вот в этой строке:
$(«#content»).html(html);

Содержимое файла time.php.

<?php echo date(«H:i:s»); ?>

Смысл работы файла time.php — выводим текущее время на экран.

Скачать исходные файлы примера (16,6 кб):
http://codething.ru/files/ajax_ex1.zip

Пример 2. Динамическое обновление контента по выбору пользователя

Программа, динамически загружающая контент, по выбору пользователя.

Содержимое файла index.html.

В теле документа создана форма, имеющая две кнопки, посредством которых пользователь осуществляет выбор желаемого контента. И контейнер для загрузки контента.

Загрузка динамического контента в контейнер осуществляется аналогично примеру 1. Разница лишь в том, что грузится различный контент, если происходят разные события.

Событие нажатия на кнопку «Страница 1» обрабатывается функцией $(‘#btn1’).click(), а событие нажатия на кнопку «Страница 2» обрабатывается функцией $(‘#btn2’).click().

Содержимое файлов page1.html и page2.html, которые загружаются в область контента динамически, представляет собой простые HTML-страницы или текстовые файлы с контентом.

Скачать исходные файлы примера (18,4 кб):
http://codething.ru/files/ajax_ex2.zip

Пример 3. Отправка данных на сервер в фоновом режиме и получение контента

Рассмотрим пример, отправляющий введенное имя пользователя на сервер. Сервер при получении имени выдает приветствие и подсчитывает количество символов в введенном имени.

Содержимое файла index.html.

В теле документа создана форма для ввода имени пользователя. И контейнер для загрузки динамического контента.

Заметим, что сама форма не имеет привычных полей action и method. В качестве обработчика события нажатия на кнопку «Отправить», выступает функция $(‘#myForm’).submit(). Рассмотрим эту функцию.

Как мы видим, основная работа опять связана с функцией $.ajax(). В этот раз появляются дополнительные параметры, не рассмотренные в примерах 1 и 2. А именно:

type: «POST» Тип передачи данных. data: «username=»+$(«#username»).val() Параметры, передаваемые серверу. В данном случае мы передаем содержимое поля username — имя пользователя. В общем случае, параметры записываются также, как в методе GET, одной строкой, например:
data: «username=Vasya&age=18&sex=male»

Обратим внимание, что в конце написана строка:

return false; Это сделано для того, чтобы форма не пыталась передать данные файлу, из которого она запускается и не происходило перезагрузки страницы.

Содержимое файла greetings.php.

<?php echo «Приветствую, <b>».$_REQUEST[‘username’].»</b>!<br>»; echo «В вашем имени букв: «.strlen($_REQUEST[‘username’]).».»; ?>

Выводим на экран приветствие и подсчитываем количество символов в имени.

Скачать исходные файлы примера (16,8 кб):
http://codething.ru/files/ajax_ex3.zip

В качестве еще одного примера использования AJAX и jQuery можно посмотреть гостевую книгу из статьи
«Гостевая книга своими руками на PHP и MySQL.

Добавляем динамизма. AJAX + jQuery».

Стоит сказать в заключении, что кроме очевидных плюсов создания страниц с использованием динамического обновляющегося контента, есть ряд недостатков, которые следует учитывать при разработке сайта, а именно:

1. На страницах с динамическим обновлением контента, кнопка «Назад» в браузере не работает корректно.

2. Страницы с динамическим обновлением контента не меняют URL, в зависимости от своего содержимого, поэтому не могут быть добавлены в закладки.

3. Страницы с динамическим обновлением контента не индексируются поисковыми системами, т.к. они не выполняют команды JavaScript.

От приведенных недостатов можно избавиться программным путем. В данной статье такие способы не рассматриваются.

Хотите дополнить — пишите: studio@pestr.ru

Статьи по теме

AJAX и JavaScript. Загрузка контента без перезагрузки страницы;
AJAX и jQuery. Как загрузить скрипт JavaScript динамически?;
AJAX и jQuery. Передача параметров из PHP в JavaScript. Использование JSON;
Гостевая книга своими руками на PHP и MySQL. Добавляем динамизма. AJAX + jQuery.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *