js .html demo

Как обновить элемент без перезагрузки страницы?

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

P. S. imnotafraid, написал функцию специально для тебя.

Простой 1 комментарий

async function elementUpdate(selector) < try < var html = await (await fetch(location.href)).text(); var newdoc = new DOMParser().parseFromString(html, 'text/html'); document.querySelector(selector).outerHTML = newdoc.querySelector(selector).outerHTML; console.log('Элемент '+selector+' был успешно обновлен'); return true; >catch(err) < console.log('При обновлении элемента '+selector+' произошла ошибка:'); console.dir(err); return false; >>

Вызывайте функцию elementUpdate() передав внутрь него CSS-селектор того элемента, который вы хотите обновить. Например, если взять таблицу, которая имеет id равное test, то достаточно выполнить:
elementUpdate(‘table#test’);

Если хотите привязать это действие к кнопке, то можете сделать так:

Нажми меня, чтобы обновить таблицу

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

Войдите, чтобы написать ответ

Почему код для замены текста в кнопке один работает, а второй нет, кто понимает разницу?

Источник

Как обновлять данные без перезагрузки страницы?

Представим что у меня есть страница на которой расположен div в котором множество блоков, а в этих блоках данные из базы данных, в общем назовём это всё списком. Мне нужно чтобы этот так называемый список постоянно обновлялся. Подскажите пожалуйста как мне это реализовать?

Мои глаза слезятся от такого кода.
Не делайте так!
Просто подключите vue js https://vuejs.org/guide/introduction.html (25-40 kb)
И работайте на высоком уровне абстракции.
Я набросал код который вам поможет, данный подход имеет следующие плюсы:
* Не тянет много лишнего
* минимален
* с сервера забирается только необходимое
* нет лапши верстки
* меньше загрузка сети
* не перестраивается дом, точнее перестраивается минимально
snippet

Николай Савельев, обоснуйте, а то у меня были версталы знакомые. Говорят мол лишний вес и все такое для калькулятора. Но их не смущал древний как мамонт джиквери под 200 кб. Куча плагинов под него, вес страницы под 15мб с картинками и скриптами.

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

Надим Закиров, Человек в состоянии задать вопрос и прочитать его. И кстати мой вариант не сложнее чем перезаписью дома .

async function elementUpdate(selector) < try < var html = await (await fetch(location.href)).text(); var newdoc = new DOMParser().parseFromString(html, 'text/html'); document.querySelector(selector).outerHTML = newdoc.querySelector(selector).outerHTML; console.log('Элемент '+selector+' был успешно обновлен'); return true; >catch(err) < console.log('При обновлении элемента '+selector+' произошла ошибка:'); console.error(err); return false; >>

Вызывайте функцию elementUpdate() передав внутрь него CSS-селектор того элемента, который вы хотите обновить.

Например, если хотите обновить div-блок который имеет класс test, то достаточно выполнить:
elementUpdate(‘.test’);

Если хотите выполнять обновление каждую секунду, можно использовать цикл:

// Запускаем функцию autoUpdate по готовности страницы: document.addEventListener('DOMContentLoaded', autoUpdate); // Функция для запуска цикла: async function autoUpdate() < // Бесконечный цикл: while (true) < // Обновляем блок .test: await elementUpdate('.test'); // Выжидаем 1000 миллисекунд перед повторением цикла: await new Promise(function(s) < setTimeout(s, 1000); >); > > // Функция для обновления контента: async function elementUpdate(selector) < try < var html = await (await fetch(location.href)).text(); var newdoc = new DOMParser().parseFromString(html, 'text/html'); document.querySelector(selector).outerHTML = newdoc.querySelector(selector).outerHTML; console.log('Элемент '+selector+' был успешно обновлен.'); return true; >catch(err) < console.error('При обновлении элемента '+selector+' произошла ошибка:', err); return false; >>

TheAndrey7, а вы на практике проверяли какую нагрузку дает? Я вот да и для небольших сайтов нагрузкой можно пренебречь. К тому же абсолютно ни что не мешает самому назначить любой другой интервал или вовсе сделать так, чтобы на стороне сервера информация отдавалась кусками, точечно или вовсе используя веб-сокет. Я что против? Нет. Только давайте это все без меня и своими силами.

TheAndrey7, ну я же не запрещаю вам доработать код так, чтобы все работало только при наличии фокуса и активности мыши? В конце концов это просто пример, его надо взять и переписать под себя, а не копировать вслепую как со stackoverflow.

Источник

Обновление содержимого веб-страницы без перезагрузки с помощью JavaScript

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

Пример обновления содержимого страницы без перезагрузки

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

Важно понимать, что идентификатор должен быть уникальным на всей странице, поэтому вызовом $(‘#block’) мы получим первый элемент на странице с таким id. Если нужно изменить содержимое нескольких элементов, стоит использовать классы.

Hello World
 
 
 
Hello World
 
 
 
 Hello World
  

Button 1
Button 2
Button 3
Clear block

return false; после вызова нужен для того, чтобы отменить переход по url из href , в нашем случае мы не вернемся вверх страницы, а останемся на месте.

Теперь рассмотрим саму функцию на JS, менять содержимое блока будем с помощью метода .html() . Если использовать его без аргументов, то он вернет нам текущее содержимое блока, если передать ему один аргумент, например строку, то он заменить содержимое блока на нее. В более приближенных к реальности случаях, методу передается функция, которая отрабатывает для блока и возвращает ему новое содержимое. Но пока мы ограничимся передачей строки.

Вот как будет выглядеть код веб-странички.

      
 
Button 1 
Button 2 
Button 3 
Clear block 
    

Пример передачи функции в метод .html()

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

 function setNewEntry(entry) < $('#block').html(getNewEntry($('#block').html(), entry)); >function getNewEntry(oldHTML, newHTML)

Заключение

Ну вот и все, если разобраться, то ничего сложного, но с помощью этого метода можно вершить «великие дела» и создавать динамические веб-страницы на любой вкус. Спасибо за внимание!

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

При успешном выполнении запроса, управление переходит функции, которая получает контент в качестве параметра и записывает его контейнер. Запись в контейнер происходит вот в этой строке:

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

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

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

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

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

     
Какую страницу желаете открыть?
      

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

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

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

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

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

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

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

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

      Введите имя: 

 
    

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

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

$('#myForm').submit(function() < $.ajax(< type: "POST", url: "greetings.php", data: "username="+$("#username").val(), success: function(html)< $("#content").html(html); >>); return false; >);

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

Параметры, передаваемые серверу. В данном случае мы передаем содержимое поля username — имя пользователя. В общем случае, параметры записываются также, как в методе GET, одной строкой, например:

data: "username=Vasya&age=18&sex=male"

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

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

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

".$_REQUEST['username']."!
"; echo "В вашем имени букв: ".strlen($_REQUEST['username'])."."; ?>

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

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

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

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

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

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

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

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

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

© 2008 — 2022 :: Codething.ru
При перепечатке и копировании статей с сайта указание автора и URL статьи обязательно!
Программный код, приведенный в статьях в качестве примеров, можно использовать без каких-либо ограничений.
Работоспособность, надежность и безопасность программного кода из примеров не гарантируется.

Источник