Ajax запрос [что нужно на клиенте и что на сервере?]

Всем добрый вечер.
У меня на сайте есть таблица в которой из бд берется список учебников и возле каждого поля таблицы есть кнопка по нажатию на которую должен показываться соответствующий ячейке текст. Пример: при нажатии на которую выводится текст из бд. С jq все туго, прошу помощи у знающих.

вот запрос к бд на вывод списка
<?php
$result=$pdo->query(“SELECT * FROM books ORDER BY ‘$sorting’”);
while ($row=$result->fetch())
{
echo ‘

’.$row[‘name_book’].’ ’.$row[‘class_book’].‘ Открыть ’;
}
?>

ata-book-id="’ . $row[‘id’] . '" = присваивает кнопке нужный id теперь нужно как то обработать, но не знаю как

Нужно

На сервере описать путь. Клиент будет ходить через ajax в него за данными. Данные потом отобразит в DOM. Можно отвечать с сервера чисто данными в JSON формате, можно строкой сгенерированного HTML которую сразу вставишь в DOM через innerHTML, смотри по своей ситуации.

Пусть путь будет /get-books-details/. Параметр будет book-id. Сервер будет генерировать ответ за запрос по этому пути. Не забудь убедиться что заголовок ответа соответствует типу данных.

Клиент делает запрос по пути, передаст айдишник книги, получает ответ, рендерит его. Айдишник клиенту можно подсказать через data-attribute в html разметке кнопки. Это общепринятый способ связывать данные с DOM узлами.

<button class="js-show-more" data-book-id="123">Открыть</button>

И собственно код запроса с клиента

$('.js-show-more').on('click', function (event) {
	//ссылка на узел на который кликнули
	var clickTarget = event.target
	var bookId = clickTarget.dataset.bookId // обрати внимание что data-book-id становится bookId, а значение будет строкой
	// Запрос. Ожидается что в ответе будут данные
	$.ajax({
		url: '/get-books-details/',
		data: {
			'book-id': bookId
		}
	}).then(function (response) {
		// отображение данных
	})
})

Это базовый пример и в нем куча потенциальных нюансов. Например пользователь кликнет на кнопку второй раз до того как придет ответ от первого клика, что делать. Или на сервере будет ошибка при генерировании ответа, как отреагирует клиент. Как именно будет происходить рендер зависит от формата ответа.


Отставляя техническую часть, я не вижу в чем ценность кнопки. С точки зрения удобства пользования данные лучше показать сразу.

1 симпатия

Спасибо, поразбираюсь. Предпологается, что после нажатия будет открыватся либо модальное окно, либо вести на страницу, где уже показан текст. Еще раз спасибо)

Для таких случаев ajax и не нужен. Генерируй ссылку на страницу вида /book-details/:bookId в кнопке а на сервере генерируй целую html страницу. На клиенте ставь ссылку на страницу получится классическая ссылочная навигация.

Для модального окна тоже не нужен ajax. Открой окно через js, а url бери у узла по которому кликнули.