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

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

Помечено: ,

  • В этой теме 0 ответов, 1 участник, последнее обновление 1 год, 3 месяца назад сделано Васильев Владимир Сергеевич.
Просмотр 0 веток ответов
  • Автор
    Сообщения
    • #5489
      @admin
      StudLance.ru

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

      Обновлять можно не только <div>, но и <span>, <td> и любой другой блочный элемент на странице. Все зависит от вашей фантазии. Перейдем сразу к примерам.

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

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

      <div id="block">
          Hello World
      
      </div>

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

      <div class="block">
          Hello World
      
      </div>
       
      <table>
          <tr>
          <td class="block">
              Hello World
      
          </td>
          </tr>
      </table>
       
      <span class="block">
          Hello World
      
      </span>

      Пусть в качестве кнопки выступает обычная ссылка <a>, с заглушкой href=#. В обычных условиях, заглушка вернет пользователя на верх веб-страницы. На ссылку повесим событие onclick, в котором вызовем js функцию setNewEntry(), которая, например, получит новое содержимое для нашего блочного элемента.

      <a onclick="setNewEntry('Pressed button 1'); return false;" href="#">Button 1</a><br>
      <a onclick="setNewEntry('Pressed button 2'); return false;" href="#">Button 2</a><br>
      <a onclick="setNewEntry('Pressed button 3'); return false;" href="#">Button 3</a><br>
      <a onclick="setNewEntry(''); return false;" href="#">Clear block</a><br>

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

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

      <script type="text/javascript">
      function setNewEntry(entry) {
          //#block - найти элемент по индентификатору
          //.block - найти по имени класса
          $('#block').html(entry);
      }
      </script>

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

      <html>
      <head>
          <title>js .html demo</title>
          <!-- Не забываем подключить библиотеку -->
          <script type="text/javascript" src="/js/jquery-3.1.1.min.js"></script>
      </head>
      <body>
       
      <div id="block">
      Hello World
      
      </div>
       
      <br>
      <a onclick="setNewEntry('Pressed button 1'); return false;" href="#">Button 1</a><br>
      <a onclick="setNewEntry('Pressed button 2'); return false;" href="#">Button 2</a><br>
      <a onclick="setNewEntry('Pressed button 3'); return false;" href="#">Button 3</a><br>
      <a onclick="setNewEntry(''); return false;" href="#">Clear block</a><br>
       
      <script type="text/javascript">
          function setNewEntry(entry) {
              //#block - найти элемент по индентификатору
              //.block - найти по имени класса
              $('#block').html(entry);
          }
       
      </script>
       
      </body>
      </html>

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

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

      <script type="text/javascript">
          function setNewEntry(entry) {
              $('#block').html(getNewEntry($('#block').html(), entry));
          }
       
          function getNewEntry(oldHTML, newHTML) {
              if(newHTML == '') 
                  return newHTML;
              else
                  return oldHTML + newHTML;
          }
      </script>

      StudLance.ru

Просмотр 0 веток ответов
  • Для ответа в этой теме необходимо авторизоваться.
×