Загружать HTML-контент страницы через AJAX

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

Я уже делал загрузку AJAX в прошлом через WordPress, поэтому знаю свой путь вокруг него. Однако раньше я не загружал содержимое всей страницы.

То, что я хочу сделать, это:

  1. Hijack нажимает на внутренние URL-адреса и AJAX загружает содержимое своих URL-адресов в основной контент-div.

  2. Я буду обтекать верхний / нижний колонтитул / боковые панели в файлах шаблона post / page в функции, чтобы проверить, был ли запрос загрузки выполнен с помощью ajax. Если бы это было, это не отразило бы те, что были в файле.

Для этого мне нужно знать, как получить html-содержимое URL-адреса в моих functions.php. После нескольких часов поиска я не могу найти ничего, что позволит мне это сделать. Все, что я имею в виду, повторяя небольшие части содержимого, а не весь HTML страницы.

Было бы здорово, если бы кто-то мог указать мне в правильном направлении!

ура

Solutions Collecting From Web of "Загружать HTML-контент страницы через AJAX"

Запрос AJAX – это запрос от клиента, как и любой другой запрос. Просто запросите URL как обычный, но с Javascript. Что касается этого, это должно быть простым. Если вы сделали элемент # 2 – «Я оберну на верхний / нижний колонтитул / боковые панели …» – правильно не должно быть никаких проблем, кроме того, что функции страницы не будут работать . Это проблема, с которой вам придется справиться. Я вижу, что это проблема в ряде обстоятельств.

Скажите, что у вас есть что-то подключенное к wp_head которое выполняется только и должно выполняться при загрузке шаблона конкретной темы. В вашей системе, которая будет работать, только если начальная загрузка страницы для этого шаблона. Если вы загружаете какую-либо другую страницу, а затем загружаете шаблон поверх AJAX, функции, подключенные к wp_head или к любым условно выполненным крючкам, не будут выполняться.

Ваш обратный вызов AJAX должен обработать несколько крючков – wp_header , wp_head , wp_footer … Я уверен, что их больше. Это может усложниться.

Вы пробовали API истории HTML5?

http://html5doctor.com/history-api/

Что касается AJAX, я просто использую метод jQuery .load() , вытаскиваю URL-адрес и выбираю идентификатор для .load() .

Допустим, у вашей главной страницы есть HTML, который выглядит так:

 <body> <header><h1>Site Title</h1></header> <a class="trigger" href="#">Load Ajax</a> <section id="ajaxBin"> <p>Content of the section</p> </section> </body> 

Затем на странице вы загружаете AJAX, у вас есть следующий HTML: введите код здесь

 <body> <header><h1>Site Title</h1></header> <aside id="sidebar"> <h2>Sidebar Info</h2> <p>This is content that should not load</p> </aside> <section id="container"> <p>All of the content you want to load with AJAX</p> </section> </body> в <body> <header><h1>Site Title</h1></header> <aside id="sidebar"> <h2>Sidebar Info</h2> <p>This is content that should not load</p> </aside> <section id="container"> <p>All of the content you want to load with AJAX</p> </section> </body> 

Поэтому, если весь ваш контент находится в элементе «#containter» на странице, которую вы хотите загрузить с помощью ajax, вы можете сделать это:

 var hrefVariable = $(this).attr('href')+'#container'; jQuery('body').on('click', 'a.trigger', function(e){ // prevent link from doing it's thang e.preventDefault(); // load specific content from an element within a new url into current pages element (#ajaxBin) jQuery('#ajaxBin').load(hrefVariable, callbackFunction); }); 

Это может избавить вас от необходимости писать дополнительные шаблоны, так как вы можете просто упорядочить свой HTML, чтобы иметь возможность тянуть контент, который вы хотите.

Это хороший учебник по этому методу.