Попробуем модифицировать пример, который получили в конце прошлой статьи "AJAX с помощью fetch в JavaScript". Напомним, что это пример мини-интернет магазина, в котором есть только одна кнопка "Моя корзина". При нажатии на неё происходит загрузка содержимого страницы
cart_ajax.html через фоновый запрос:
<!DOCTYPE html>
<html>
<head>
<title>Интернет магазин</title>
</head>
<body>
<span onclick="loadCart()">Моя корзина</span>
<div id="store"></div>
<script>
function loadCart(){
fetch('/cart_ajax.php?show_price=yes').then(
response => {
return response.text();
}
).then(
text => {
document.getElementById('store').innerHTML = text;
}
);
}
</script>
</body>
</html>/cart_ajax.php?show_price=yes. Раньше был HTML файл, но для обработки GET параметра до вывода результата будем использовать именно PHP. Теперь напишем содержимое этого PHP файла. Будем исходить из такой логики: если GET параметр "show_price" имеет значениее "yes", то нужно вывести цены на товары в списке, иначе не выводить. Получится такой код:
<?php
$showPrice = false;
if($_GET['show_price'] == 'yes') $showPrice = true;
?>
<p>
Сыр, 1 кг <?php if($showPrice) echo ' - 5 рублей';?>
</p>
<p>
Молоко, 1 литр <?php if($showPrice) echo ' - 10 рублей';?>
</p>/cart_ajax.php?show_price=yes . Должен показаться список покупок с ценами. Потом измените GET значение "yes" в адресной строке на любое другое и загрузите страницу - появится список без цен.С помощью передачи информации в AJAX запросе можно сделать полностью интерактивные сайты. В том числе с отправкой данных формы авторизации/регистрации через AJAX запрос. Но для них никогда не используйте GET передачу! Такие секретные данные можно передавать только POST запросом, о котором читайте в наших следующих статьях.
Поисковые сети умеют определять адреса страниц из скриптов. Поэтому рано или поздно в поисковой выдаче появится /cart_ajax.php?show_price=yes . Чтобы этого не произошло, надо запретить индексацию этого файла в файле robots.txt. А чтобы контент этого файла вообще не отображался, необходимо добавить в начало PHP скрипта проверку типа запроса на соответствие XMLHttpRequest:
<?php
if($_SERVER['HTTP_X_REQUESTED_WITH'] != 'XMLHttpRequest') die();
$showPrice = false;
if($_GET['show_price'] == 'yes') $showPrice = true;
?>
<p>
Сыр, 1 кг <?php if($showPrice) echo ' - 5 рублей';?>
</p>
<p>
Молоко, 1 литр <?php if($showPrice) echo ' - 10 рублей';?>
</p>
