Как менять контент на html странице без перезагрузки страницы?
Добрый день, я новичок в этой теме.
У меня есть страничка index.html генерируется Python\Flask, если страничка меняется — чтобы увидеть изменения — нужно обновить страницу в браузере, оно и понятно.
Хочу сделать так: браузер раз в 0.5 секунды запрашивает контент — если поменялся — меняет его на странице, без перезагрузки.
Задача учебная, данных мало, можно всю страницу целиком перезагрузить. Как это сделать?
как изменить контент без перезагрузки страницы? [Дубликат]
Хорошо, так что скажем, что у меня есть navbar, например.
и у меня есть контент на странице, которую я хочу изменить, в зависимости от того, какой <li> выбран без перезагрузки всей страницы. Кажется немного бессмысленным перезагрузить всю страницу, чтобы обновить 2 div.
например. когда выбран домашний объект. Я хочу загрузить home.php, включенный в <div > + изменить класс <li> home</li> на выбранный и т.д.
следует ли использовать AJAX для этого? или я должен использовать $ _GET → изменение URL-адреса?
Как менять контент на странице не обновляя странцу?
Причем простыми технологиями, без аяксов и всего такого, что не будет работать «с хтмл-копии сайта на компакт диске» (сграбленной роботом).
Есть 3д-панорама и окно с информацией.
При нажатии на хотспоте в панораме — меняется информация в окне.
И все это Без обновления всей страницы.
(На экшн в хотспоте можно вешать почти все что угодно).
Панорама может быть как хтмл5 так и флеш — не принципиально.
Мне советуют копать js сюда:
document.getElementById(«id»).innerHTML = ‘content’;
Правильно советуют?
Или такое вообще невозможно?
да javascript, только положи на диск еще jquery и делай все через нее, т.к. можешь запариться с DOM под разными браузерами.
т.е. возможно сделать такую страницу, у которой будет меняться контент в дивах, без обновления всей страницы? и это может работать даже с болванки?
можешь в какие-то ссылки (на русском!) носом ткнуть? чтоб выбирать не из всего и вся по jquery
советуют правильно. Можно еще воспользоваться любым client-side tabbed pane джаваскриптовым компонентом. Можно использовать hidden и игры с визибилити.
в IE6
ДАЮ НАВОДКУ ВЕБМАСТЕРУ: display: block; display: none;
Это называется DHTML (Dynamic HTML) и пашет с незапамятных времен во всех браузерах. Только API может немного отличаться, для того, чтобы это не мешало, используются библиотеки вроде jQuery.
Помимо дисплей нон можно ещё слить всё в огромную простыню, разбить якорями и сделать примерно так, работать будет и без яваскрипта. Ещё есть псевдокласс ::target, вроде им тоже можно ловить клики.
Обновление содержимого веб-страницы без перезагрузки с помощью JavaScript
Появилась необходимость обновлять содержимое блока <div> по нажатию на кнопку, без перезагрузки страницы, чтобы не свести пользователя с ума. Благодаря этой небольшой заметке можно раз и навсегда запомнить, как такое реализовать.
Обновлять можно не только <div> , но и <span> , <td> и любой другой блочный элемент на странице. Все зависит от вашей фантазии. Перейдем сразу к примерам.
Пример обновления содержимого страницы без перезагрузки
Прежде всего, нам нужен блочный элемент. Пусть это будет <div> , создадим его на странице и присвоим ему уникальный идентификатор, по которому его узнает jQuery.
Важно понимать, что идентификатор должен быть уникальным на всей странице, поэтому вызовом $(‘#block’) мы получим первый элемент на странице с таким id. Если нужно изменить содержимое нескольких элементов, стоит использовать классы.
Пусть в качестве кнопки выступает обычная ссылка <a> , с заглушкой href=# . В обычных условиях, заглушка вернет пользователя на верх веб-страницы. На ссылку повесим событие onclick , в котором вызовем js функцию setNewEntry() , которая, например, получит новое содержимое для нашего блочного элемента.
return false; после вызова нужен для того, чтобы отменить переход по url из href , в нашем случае мы не вернемся вверх страницы, а останемся на месте.
Теперь рассмотрим саму функцию на JS, менять содержимое блока будем с помощью метода .html() . Если использовать его без аргументов, то он вернет нам текущее содержимое блока, если передать ему один аргумент, например строку, то он заменить содержимое блока на нее. В более приближенных к реальности случаях, методу передается функция, которая отрабатывает для блока и возвращает ему новое содержимое. Но пока мы ограничимся передачей строки.
Вот как будет выглядеть код веб-странички.
Пример передачи функции в метод .html()
Я придумал совсем простенькую функцию, которая будет накапливать нашу историю нажатий на кнопки, и очищать ее, когда мы захотим. Для демонстрации вполне достаточно.