Ответы пользователя по тегу Веб-разработка
  • Как избавиться от скачка после выполнения скрипта поиска?

    Технология
    AJAX (аббревиатура от «Asynchronous Javascript And Xml») – технология обращения к серверу без перезагрузки страницы.

    А конкретно, что вам надо - это
    jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API для работы с AJAX.

    Приблизительный код
    Javascript
    $(document).on('click', '.my_link', function(){
    $.ajax({url: 'actions.php', method: 'POST', data: {'data-action': 'show_users_table'}, 
    success: function(data){
    $('.table_content').html(data);
    }});
    };


    HTML
    <head>
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    </head>
    
    <a class="my_link">Обновить таблицу</a>
    <div class="table_content"></div>


    Скрипт
    При щелчке по ссылке с классом my_link jquery отправляет на адрес actions.php (скрипт в моей папке) методом пост данные data-action и значение show_users_table.
    А в файле actions.php я принимаю data-action и смотрю, а что там? Вижу - о да там же show_users_table, т.е. просят меня показать табличку с юзерами. Выполняю все нужные действия и возвращаю (echo) таблицу.

    А JS скрипт и ждет возврата данных success: function(data). И помещает код таблицы в data.
    И далее $('.table_content').html(data) - т.е. найти элемент с классом table_content (это див на странице) и вставить туда содержимое переменной data (мою таблицу).

    И вот, я получил таблицу без перезагрузки страницы.
    Ответ написан