Как правильно использовать AJAX + PHP?

Question

[lilikon]

Имеется код:

<div id="mainmenu">
<ul class="mainmenu">
<li class="link">категория1</li> 
<li class="link">категория2</li> 
<li class="link">категория3</li> 
</ul>
</div>

Он открывает список с данными из базы с товарами.
Вывод пока что сделан через функцию:
<? shop_product(); ?>
В функции PHP:

function shop_product() {
$product_shop = mysql_query("SELECT * FROM shop WHERE type='1'");
echo "<div class='shop_product'><ul>";
while ($product= mysql_fetch_array($product_shop )){
echo "<li class='flip-container'>{$product['name']}</li>";}
echo "</ul></div>";

Выводит товары как надо.

НО если изменяю на сервере то надо обновить страницу. - ЭТО ПЛОХО

НО если в запросе поставить проверка на дату, и дата меньше текущей, он в базе меняет тип с 0 на 1 и не должен выводить товар, но что бы товар исчез приходится до 2 раз обновить страницу. - ЭТО ПЛОХО

Как сделать без обновления страницы обновление этих данных?

Знаю что можно сделать через AJAX, но я не очень хорошо умею им пользоваться =(

Прошу показать рабочий пример на моих данных, очень буду благодарен

Comments

[Dark Hole]

Пример чего?

[lilikon]

Dark Hole: Пример как сделать AJAX запрос на вывод товаров из базы (с моими данными)

[Dark Hole]

lilikon: для этого нужна страница, которая будет нам выводить данные

Answer 1

[Кирилл Несмеянов]

Обратную связь реального времени можно сделать через:
а) WebSocket
б) Long Polling
в) Другие морально устаревшие или извращённые решения, вроде "Опроса", "Gif Push", "iframe push", etc...

Смотреть в гугле, т.к. сюда код не влезет, например: socketo.me/docs/hello-world

Comments

[lilikon]

Кирилл Несмеянов: спасибо, попробую, жаль пример с моим кодом не получилось написать, так было бы мне проще понять =(

[Кирилл Несмеянов]

lilikon: `composer require cboden/ratchet`, а потом ctrl+c ctrl+v код в примере. Чего не понятно в тех примерах в хелло ворлд? о_0

[Кирилл Несмеянов]

lilikon: lilikon: если всё же не понятно, то, думаю, это пока не тот уровень за который стоит браться. Самое простое решение в этом случае будет ajax опрос, делается элементарно на чистом js:

setInterval(() => {
    fetch('//yoursite.com/addr')
        .then(response => respose.text()
            .then(data => document.getElementById('some').innerHTML = data);
    );
}, 5000);

Но оно настолько далеко от идеала, как mysql запросы от современного php (напоминаю, что mysql_* функции уже лет 5 как удалены из языка).

[lilikon]

Кирилл Несмеянов: спасибо

Answer 2

[Максим Тимофеев]

Схема с Ajax такая:
ajax отправляет запрос на определенный адрес, так скрипт делает нужную выборку и возвращает или готовый кусок html или данные в формате json. При получении ответа от сервера, заменяем старый блок на новый или формируем новый на основе полученного json.
Например:

$('select').on('change', function() {
  var chosen = $(this).val(); //берем выбранный результат
  var url = 'http://somemydomain.ru/some-controller/some-action?chosen=' + chosen; //формируем урл
  $.get(url,function(data){ //отправляем ajax запрос
     $('#blockToUpdate').html(data); //вставляем данные пришедшие от сервера
  });
})

соответственно на сервере что-то типа этого:

function actionSomeAction(){
$chosen = $_GET['chosen'];
return '<p>Выбран '.$chosen.'</p>';
}

Есть еще удобный плагин PJAX:
https://github.com/defunkt/jquery-pjax

Comments

[lilikon]

Максим Тимофеев: спасибо, сейчас попробую написать у себя

Answer 3

[kpa6uu]

Если "горит" и нужно сделать быстро - вот простой пример:

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

Для примера возьмём метку времени.

Если переданная на экшен метка времени изменения полученного контента < метки времени последнего изменения контента на сервере - производим выдачу контента экшеном.
Если же контент актуален - производим выдачу определённой константы, которую понимает обработчик запроса и не производит замену контента.

Логику можно разбить на два экшена.

P.S: с вебсокетами дела не имел, а вот за лонг_поллинг плюсую, если у вас будет время разобраться - хорошая альтернатива.

Comments

[lilikon]

kpa6uu: а можно пример кодом, извини что прошу пример наглядный, но я лишь так быстро воспринимаю все и понимаю =( Если Вам будет не сложно написать пример как это реализовать, то я буду очень благодарен

Answer 4

[ThunderCat]

Мне кажется вы что то делаете не так, я примерно начал понимать после 5 прочтения вопроса, что задача которую вы решаете немного.... криво реализована.

Похоже что у вас есть список товаров в базе, есть дата окончания их продажи (пипец как вы шифруетесь) , при выборке вы выбираете товары которые пометили как непросроченные, потом проверяете есть ли в базе просроченные, потом ставите статус просрочен им всем, и затем выбираете еще раз уже "чистый" список?

Comments

[lilikon]

ThunderCat: да примерно так

[ThunderCat]

lilikon: Вам не кажется что на каком то этапе ""что то пошло не так"? Не проще сразу делать запрос с выборкой по условию - дата больше текущей, это избавит вас от проблем а) вставки какого-то непонятного числа в непонятное поле; б) перевыборки с числом/без числа; в) перезагрузки странички, которая абсолютно не нужна.