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

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

  • dmitriy85

    (@dmitriy85)


    5 лет, 3 месяца назад

    Вопрос такой. Как сделать, чтобы при нажатии на одну из ссылок, менялся контент на странице без ее перезагрузки с помощью 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-адреса, как-то связать скрипт (или несколько скриптов) с этими ссылками, указать путь, откуда будет браться контент, а потом этот шаблон применять к новой созданной странице или как? Как правильно нужно сделать? Вообще не могу понять, как это сделать и какие скрипты нужны.
    Ещё раз прошу, не стоит ругать может быть за не правильное описание вопроса и за не знание языка программирования и не советуйте читать книжки по нему. Создал тему для реальной помощи, а не для нотаций.

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

    • Тема изменена 5 лет, 3 месяца назад пользователем dmitriy85.
Просмотр 4 ответов — с 1 по 4 (всего 4)
  • Модератор Yuri

    (@yube)

    5 лет, 3 месяца назад

    Сам в 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

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

    qwert555

    (@qwert555)

    5 лет, 3 месяца назад

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

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

    <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>

    Модератор Yuri

    (@yube)

    5 лет, 3 месяца назад

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

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

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

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

    Автор dmitriy85

    (@dmitriy85)

    5 лет, 3 месяца назад

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

    В инете есть примеры, но не для этого случая. В основном примеры про подгрузку постов по нажатию кнопки Загрузить ещё или подгрузку при скроллинге страницы.
    Вот, например, есть такой код для файла 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 . Я не могу понять, как это применить. Нужно ли создавать шаблон страницы, как связать код с меню и со статьями и так далее.
    Но всё равно, спасибо за ответ.

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

Просмотр