Как брать данные методом GET c URL и выводить на странице в режиме лайв?

Question

[Dmitry]

Как брать данные с URL и выводить на странице в режиме live ?
Например сейчас страница - site.ru/#send1
выводило на страницу site.ru/#send1 если урл сменится без перезагрузки страницы ?

Answer 1

[Demian Smith]

Библиотека для раутинга может вам помочь. Например вот https://github.com/swipely/aviator

Comments

[Dmitry]

библиотеками не пользовался, можете показать пожалуйста пример ?

[Demian Smith]

С авиатором я погорячился. Прошу прощения. Он подключается через NPM. Вы, скорее всего, с этим еще не сталкивались. Есть способ проще: https://github.com/camme/jquery-router-plugin
Это плагин к jQuery. Там всего один файл, скачиваете его и подключаете к проекту сразу после подключения самой jQuery. Примеры по созданию путей и редиректу есть в ридми. Удачи!

[Dmitry]

Demian Smith: с Вами можно как-то связаться ?

Answer 2

[Павел Волынцев]

Это всё реализуется на JavaScript

Технологии:

• Single page Application - технология одностраничных приложений
  
• Rich Internet Application - технология функционально насыщенных клиентских приложений
  
  

Более детально:

• HTML5 HistoryAPI (pushState) - навигация (смена URL) без перегрузки страницы + выбор логики в зависимости от URL страницы (две стороны одной технологии)
  
• AJAX - передача данных через HTTP
  
• шаблонизация, DOM или VirtulDOM- подстановка данных и формирование HTML
  
  

Получается так:
Сценарий А)

• пользователь кликает по ссылке
  
• ссылка не срабатывает
  
• вместо этого вызывается код на JS, который
  • выполняет смену URL
    
  • выбирает, какой вариант представления показать пользователю
    
  • запрашивает недостающие данные с сервера через HTTP
    
  • интерпретирует полученный ответ в браузере (например, показывает в формате HTML)
  
  

Сценарий Б

• пользователь открывает страницу с неким URL
  
• JS анализирует этот URL и
  • выбирает, какой вариант представления показать пользователю
    
  • запрашивает недостающие данные с сервера через HTTP
    
  • интерпретирует полученный ответ в браузере (например, показывает в формате HTML)
  
  

Всё это реализуется в современных решениях типа Angular 1/2/..., Vue, React и дополнительными библиотеками
Пример на Angular 1 plnkr.co/edit/nnHRWJ?p=preview
Можно и на jQuery реализовать https://codepen.io/copist/pen/ZQRJeL