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

  • Вопрос такой. Как сделать, чтобы при нажатии на одну из ссылок, менялся контент на странице без ее перезагрузки с помощью AJAX?
    Есть много статей и видеоуроков как подгружать, например, посты динамически, нажимая кнопку «Загрузить еще», или подгружать их при прокрутке страницы. Но это всё не то. Всё перерыл и не нашел ни одного примера.

    Объясню поподробнее. Чтобы было ясно, как это должно происходить, перейдите, пожалуйста, по ссылке ниже. Откроется страница Центра поддержки сайта Юла — https://help.mail.ru/youla . Слева есть колонка со списком в виде ссылок (типа <ul><li></li></ul>), справа я так понял колонка для контента, заключенная в <div>, и все эти колонки тоже заключены в общий <div>. Нажимая на ссылки, в правую колонку подгружается контент, соответствующий нажатой ссылке, но страница не перезагружается, а в адресной строке слаги (уникальный url) всё равно меняются (видимо это делается с помощью history.pushState() или history.replaceState()).

    Не могу понять, как осуществить примерно такую же смену контента (статей) у себя на сайте, поэтому решил написать здесь. Я хочу сделать страницу для справок, для помощи пользователям и нужен такой же способ подгрузки статей. Кстати, использую WordPress. Сам в javascript вообще не шарю, знаю только html и css. Не стоит ругать, что взялся за сайт, не зная языки веб программирования. Я использую премиум шаблон и, если есть какие-то вопросы, использую техподдержку. Но это другой случай.

    Также не понятно, как сделать этот алгоритм. Нужно в Вордпрессе создать несколько нужных мне записей (постов), создать шаблон страницы с меню в виде ссылок, заключить его в <div>, справа создать еще один див, в ссылках меню указать путь к статьям (например, ссылки типа <a href="/articles/help/how">Как пользоваться сайтом</a>), написать какой-то скрипт для замены контента без перезагрузки и для смены url-адреса, как-то связать скрипт (или несколько скриптов) с этими ссылками, указать путь, откуда будет браться контент, а потом этот шаблон применять к новой созданной странице или как? Как правильно нужно сделать? Вообще не могу понять, как это сделать и какие скрипты нужны.
    Ещё раз прошу, не стоит ругать может быть за не правильное описание вопроса и за не знание языка программирования и не советуйте читать книжки по нему. Создал тему для реальной помощи, а не для нотаций.

    Надеюсь, вы сможете помочь мне с написанием кода и с алгоритмом его применения. Заранее большое спасибо!

    • Тема изменена 3 года, 11 месяцев назад пользователем dmitriy85.
Просмотр 4 ответов — с 1 по 4 (всего 4)
  • Сам в javascript вообще не шарю

    Придется разбираться, хотя бы в азах.

    вы сможете помочь мне с написанием кода и с алгоритмом его применения.

    Помочь — да, сделать за Вас — вряд ли.

    1. Проще всего сразу подключить фреймворк jQuery, если еще не подключен.
    Матчасть: Plugin API/Action Reference/wp enqueue scripts « WordPress Codex

    2. Обработка клика по элементу с id="link-1"
    jQuery("#link-1").click()
    https://api.jquery.com/click/

    3. замена контента в контейнере с id="div-1"
    jQuery("#div-1").load()
    https://api.jquery.com/load/

    4. Использование AJAX в wordpress.
    AJAX in Plugins « WordPress Codex

    Сомневаюсь, что на просторах Сети не нашлось статей на эту тему.

    Вот самый наверное простой пример:

    ссылки в шаблоне

    <span class="link-aj" data-id="222">кликни</span>
    <span class="link-aj" data-id="555">кликни</span>

    JavaScript — добавить в шаблон или в отдельный файл

    $('body').on('click', '.link-aj', function(){
    i =$( this ).data('id'); 
    $.ajax({
    type: 'post',
    url: "/wp-admin/admin-ajax.php", 
    data: {
    action: 'my_aj',
    'id':i,
    },
    success: function(html){
    $('.result').html(html); 
    },
    })
    });

    обработчик — добавить например в functions.php темы

    function func_my_aj() {
    echo $_POST['id']
    die();
    }
    add_action('wp_ajax_my_aj', 'func_my_aj');
    add_action('wp_ajax_nopriv_my_aj', 'func_my_aj');

    контейнер куда будет загружаться контент из обработчика
    <span class="result">тут появится контент(в данном примере 222 или 333)</span>

    Вот самый наверное простой пример:

    Типа того. Только приведенный js надо обернуть в

    jQuery(document).ready(function($){
    // тут код
    });
    

    и не забыть подключить jQuery.

    Спасибо хотя бы за такой ответ. Попробую разобраться.

    В инете есть примеры, но не для этого случая. В основном примеры про подгрузку постов по нажатию кнопки Загрузить ещё или подгрузку при скроллинге страницы.
    Вот, например, есть такой код для файла index.html:

    <html>  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; Charset=UTF-8">  
    <script>  
        function showContent(link) {  
      
            var cont = document.getElementById('contentBody');  
            var loading = document.getElementById('loading');  
      
            cont.innerHTML = loading.innerHTML;  
      
            var http = createRequestObject();  
            if( http )   
            {  
                http.open('get', link);  
                http.onreadystatechange = function ()   
                {  
                    if(http.readyState == 4)   
                    {  
                        cont.innerHTML = http.responseText;  
                    }  
                }  
                http.send(null);      
            }  
            else   
            {  
                document.location = link;  
            }  
        }  
      
        // создание ajax объекта  
        function createRequestObject()   
        {  
            try { return new XMLHttpRequest() }  
            catch(e)   
            {  
                try { return new ActiveXObject('Msxml2.XMLHTTP') }  
                catch(e)   
                {  
                    try { return new ActiveXObject('Microsoft.XMLHTTP') }  
                    catch(e) { return null; }  
                }  
            }  
        }  
    </script>  
    </head>  
      
    <body>  
      
        <p>Какую страницу желаете открыть?</p>  
          
        <form>  
            <input onclick="showContent('page1.html')" type="button" value="Страница 1">  
            <input onclick="showContent('page2.html')" type="button" value="Страница 2">  
        </form>  
          
        <div id="contentBody">  
        </div>  
      
        <div id="loading" style="display: none">  
        Идет загрузка...  
        </div>  
          
    </body>  
    </html>

    Но я так понял здесь нужно использовать кнопки и подгружать только страницы.
    Мне же нужно, чтобы была только одна страница с одним меню и чтобы, нажимая по ссылкам, подгружался (заменялся) контент из статей, записей, которые я буду создавать в меню Вордпресса. Ну и как я понимаю, эти статьи нужно как-то связывать с ссылками в меню через id или через слаги, url.

    Или, допустим, есть вот такой видеоурок, больше подходящий для моей ситуации, но это тоже не то — https://www.youtube.com/watch?v=cLwC91Zx024 . Я не могу понять, как это применить. Нужно ли создавать шаблон страницы, как связать код с меню и со статьями и так далее.
    Но всё равно, спасибо за ответ.

    • Ответ изменён 3 года, 11 месяцев назад пользователем dmitriy85.
    • Ответ изменён 3 года, 11 месяцев назад пользователем dmitriy85.
    • Ответ изменён 3 года, 11 месяцев назад пользователем dmitriy85.
Просмотр 4 ответов — с 1 по 4 (всего 4)
  • Тема «Замена контента по нажатию ссылки без перезагрузки страницы с AJAX» закрыта для новых ответов.