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

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

Помечено: ,

В этой теме 0 ответов, 1 участник, последнее обновление  Васильев Владимир Сергеевич 1 месяц, 4 нед. назад.

  • Автор
    Сообщения
  • #5489
    @admin

    Появилась необходимость обновлять содержимое блока <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>

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