AJAX с использованием pushState ()
Я нашел замечательную статью, в которой объясняется, как использовать pushState с AJAX.
https://moz.com/blog/create-crawlable-link-friendly-ajax-websites-using-pushstate
Но я не могу понять, как организован файл «content.php». В комментариях часто задают этот вопрос, но никто не ответил на это. Это очень важно, потому что без «content.php» ничего не работает.
Может быть кто-нибудь знает пример «content.php»? Я буду признателен. Спасибо
Решение
Код в ссылке, которую вы предоставили, делает простой запрос get в файл PHP с именем content.php, Затем PHP-файл возвращает JSON в качестве ответа.
То, что я собираюсь записать дальше, это простой пример того, как настроить content.php файл, это не рекомендуется, но для примера, вы можете сделать это
<? php
$contentId = $_GET['contnentid'];
doSomethingWith($contentid)
public function doSomethingWith($contentId)
{
//get content with id from db or somewhere
return json_encode(['Content' => 'Some content']);
}
Другие решения
content.php не имеет отношения к window.history.pushState() и всегда зависит от контекста.
Более длинный ответ:
Проверьте http://html5.gingerhost.com/
В этом случае, когда вы нажимаете «Сиэтл», то content.php возвращает:
{«title»: «Сиэтл — часть демонстрации для #ProSEO», «h1»: «Сиэтл», «article #articletext»: «
Сиэтл является самым северным крупным городом в смежных Соединенных Штатах, а также крупнейшим городом на Тихоокеанском северо-западе и в штате Вашингтон. Это крупный морской порт, расположенный на узком перешейке между Пьюджет-Саунд (рука Тихого океана) и озером Вашингтон, в 114 милях (183 км) к югу от границы между Канадой и Соединенными Штатами, и назван в честь Главного департамента \ «. Сиэтл \ «, из племен дувамиш и суквамиш. Сиэтл — центр столичной статистической зоны Сиэтл-Такома-Белвью — 15-й по величине мегаполис в США и крупнейший на северо-западе США.</ Р>
Сиэтл является административным центром округа Кинг и является крупным экономическим, культурным и образовательным центром в регионе. Перепись 2010 года показала, что в Сиэтле проживает 608 660 жителей в столичном регионе с населением около 3,4 миллиона человек. Порт Сиэтла, который также управляет международным аэропортом Сиэтл-Такома, является главными воротами для торговли с Азией и круизами на Аляску, и является 8-ым по величине портом в Соединенных Штатах с точки зрения вместимости контейнеров.</ Р>», «# образ»: «»}
Это затем используется JavaScript для заполнения соответствующей Div с этой информацией. Там нет общего правила именования (это может быть content.php или же content.aspx или вообще ничего)
В частности код в это: http://html5.gingerhost.com/
$(function() {
$('nav a').click(function(e) {
$("#loading").show();
href = $(this).attr("href");
loadContent(href);
// HISTORY.PUSHSTATE
history.pushState('', 'New URL: '+href, href);
e.preventDefault();});
// THIS EVENT MAKES SURE THAT THE BACK/FORWARD BUTTONS WORK AS WELL
window.onpopstate = function(event) {
$("#loading").show();
console.log("pathname: "+location.pathname);
loadContent(location.pathname);
};
});
function loadContent(url){
// USES JQUERY TO LOAD THE CONTENT
$.getJSON("content.php", {cid: url, format: 'json'}, function(json) {
// THIS LOOP PUTS ALL THE CONTENT INTO THE RIGHT PLACES
$.each(json, function(key, value){
$(key).html(value);
});
$("#loading").hide();
});
// THESE TWO LINES JUST MAKE SURE THAT THE NAV BAR REFLECTS THE CURRENT URL
$('li').removeClass('current');
$('a[href="'+url+'"]').parent().addClass('current');
}
Это можно получить, проверив источник кода, однако вы можете оказаться в законных пределах, если будете использовать их код для своего собственного сайта.