Добавление AJAX онлайн урок.


В этом уроке продемонстрируем использование AJAX для добавления товара в корзину. Для начала, подключим jQuery на нашей страничке. Далее, изменим ссылки добавления товаров. Атрибут href нам не понадобится, потому его значением будет #. В тег ссылки вставим атрибут id в котором будет сохраняться идентификатор товара:

foreach ($books as $book) {
   echo "<b>{$book['title']}</b> <a href='#' id='add-{$book['id']}'>Add to cart</a> <br>";
}


Добавим обработчик события клика по этим ссылкам:

$("a[id|='add']").on('click', function() {
   // somth
});


Тут был использован селектор, который соответствует тегам a, у которых атрибут id начинается с add-. Далее необходимо извлечь сам идентификатор из строк типа add-237:

]$("a[id|='add']").on('click', function() {
id = $(this).attr('id').split('-');
id = id[1];
});


И наконец, добавляем асинхронный запрос:

$("a[id|='add']").on('click', function() {
id = $(this).attr('id').split('-');
id = id[1];
$.get('cart.php?action=add&id=' + id, alert('Product ' + id + ' added'));
});