Как выявить изменение цены в столбце mysql таблицы и отобразить это на сайте при ajax запросе один раз?

Question

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

Второй скрипт выводит актуальную информацию из базы данных на сайт.

Как на сайте отобразить визуально эффект изменения цены?

Т.е. допустим цена была 5000 рублей, страничка обновилась с помощью ajax но в базе цена уже 4500, как сообщить скрипту, что цена изменилась, чтобы визуально это оформить?

Предполагаю, что в базе нужно иметь 2 схожих таблицы или создавать временную таблицу и при выводе на сайт сравнивать значения в обеих таблицах.

Мне не ясен механизм данной затеи. Допустим в первой таблице 5000,а во вторую записалось новое значение в 4500, на сайте выведу. Что делать дальше при следующем обновлении ajax, ЧТО И С ЧЕМ СРАВНИВАТЬ... ведь цены будут разными и на сайте вновь и вновь будет визуальный эффект изменения цены, когда по факту изменения не было.

Помогите разобраться.

Задача: сохранять информацию о всех изменения в определенной таблице. Наиболее простое решение - создать таблицу, совпадающую по структуре с отслеживаемой и при каждом изменении писать в эту таблицу строку с обновленным состоянием измененной строки. Сделать это можно с помощью триггера, отслеживающего операции INSERT, UPDATE и DELETE.

Было изменение, строку записал и с чем мне сравнивать значения? Ведь UPDATE обновит основную таблицу и запишет данные во вторую и они будут идентичны.

Запутался...

<script type="text/javascript">
    function show()  
    {  
        $.ajax({  
            url: "ajax.php",  
            cache: false,  
            success: function(html){  
                $("#app").html(html);  
                $('.box').first().addClass('animate__animated animate__bounce'); //  $('.box').first().addClass('animate__animated animate__bounce');
            }  
        });  
    }  
  
    $(document).ready(function(){  
        show();  
        setInterval('show()',1000);  
    });  
</script>

Ajax html ответ

<tbody>
              <tr>
                <td>
                  <a href="https://site.ru">title</a>
                </td>
                <td>1000 <i class="ic-icon_rub"></i>
                </td>
                <td> 
                  <span class="xxx-text-bold">автор</span>
                </td>
                <td>id 3</td>
              </tr>
              
              <tr>
                <td>
                  <a href="https://site.ru">title</a>
                </td>
                <td>1000 <i class="ic-icon_rub"></i>
                </td>
                <td> 
                  <span class="xxx-text-bold">автор</span>
                </td>
                <td>id 4</td>
              </tr>
</tbody>

Для title нужно прописать class="box"

Можно изменить html я под него подстроюсь.

Answer 1

Если задача состоит только в том, чтобы показать изменение цены на странице у клиента, то алгоритм может быть таким:

Берем цену или массив цен о товарах со страницы.
В отправляем ajax запрос, методом POST, суем ему массив с ценами, ид товаров и пр.
На сервере сравниваем цены с базой, формируем массив с изменениями и отправляем обратно на страницу.
Измененные цены подсвечиваем как-то.

И не нужно вторых таблиц

Ваш код может быть таким:

<?php 
// файл index.php 

// получаем массив товаров из базы (Select * FROM table и так далее). 
// Для примера я подготовлю данные, как будто получены из базы
$data = array(
    3 => array(
        'title' => 'товар3',
        'price' => 5000
    ),
    4 => array(
        'title' => 'товар4',
        'price' => 4500
    )
);
?>

<!-- теперь выводим этот массив -->
<table>
    <?php foreach($data as $id => $item){ ?>
    <tr>
        <td><?=$item['title']?></td>
        <td>
            <span class="price" data-id="<?=$id?>" data-price="<?=$item['price']?>"><?=$item['price']?></span>
        </td>
    </tr>
    <?php } ?>
</table>

<script>
    
window.addEventListener('load', function(){
    setInterval(updatePrices, 1000);
});

function updatePrices(){
    let prices = {};
    // найдем все элементы товаров по классу "price"
    $('.price').each(function(e, elem){  // здесь elem - это наш <span> с ценой
        prices[$(elem).data().id] = $(elem).data();
    });
    
    // теперь в массиве prices у нас:
    /**
    3: {item_price: 5000, item_id: 3}
    4: {item_price: 4500, item_id: 4}
    */
   
    $.ajax({
        url: 'ajax.php',
        type: 'POST',
        dataType: 'json',
        data: {client_prices: prices },
        success: function(jsonResponse){
            // здесь у нас в jsonResponse массив с обновленными ценами
            for(var id in jsonResponse){
                // находим на странице элемент c нужным значением атрибута data-id и меняем его цвет и содержимое
                $('[data-id='+id+']').css('color', 'red').html( jsonResponse[id]['price'] );
            }
        },
        error: function(jqXHR, status, msg){
            console.log(jqXHR); console.log(msg+' '+status); 
        }
    });
}
    
</script>

И примем данные на сервере:

// файл ajax.php

// получаем данные из аякса
$client_post_data = filter_input_array(INPUT_POST);
$client_prices = $client_post_data['client_prices'];

// берем цены из базы (как и на перовй странице, то же самое).
// получаем массив товаров из базы (Select * FROM table и так далее). 
// Для примера я подготовлю данные, как будто получены из базы, с измененной ценой "товар3"
$db_price = array(
    3 => array(
        'title' => 'товар3',
        'price' => 7000
    ),
    4 => array(
        'title' => 'товар4',
        'price' => 4500
    ),
);

$changed_prices = array();

// сравниваем цены:        
foreach ($client_prices as $id => $client_price){
    if($client_price['price'] != $db_price[$id]['price']){
        $changed_prices[$id]['price'] = $db_price[$id]['price'];  // если цена не совпадает, сохраняем новую из базы
    }
}

// теперь в массиве $changed_prices только те цены, которые изменены
// отправляем его:
echo json_encode($changed_prices);

БЛОГ НА HUSL

Как выявить изменение цены в столбце mysql таблицы и отобразить это на сайте при ajax запросе один раз?

Ответы (1 шт):