Sinatra + Ajax для загрузки динамического содержимого

Question

Я хочу создать страницу с заполненной динамической информацией с помощью Ajax (JQuery). Информация будет получена из разных GET, которые мне нужно делать в других URL-адресах. Я буду использовать Sinatra + JQuery для этого, но поскольку мой опыт WEB почти нулевой и не имеет никакого представления, как это сделать правильно. Предпосылками для этого являются:

• Каждый раз, когда GET завершается, новая строка информации должна появиться на этой странице.
• Если GET не может быть заполнен, на странице появляется информация по умолчанию.

Моя идея до сих пор сделать что-то вроде этого:

• Есть мой контроллер выполняя каждый GET внутри потока.
• Каждый раз, когда нить заканчивается, с успехом или нет, я сообщаю представление результата и сделать частичный
• у меня будет столько, сколько парциальное как мне нужно (для каждого ПОЛУЧИТЬ я должен делать)
• в первый раз я загружаю страницу. Я заполняю информацию по умолчанию, которую я обновляю через AJAX с успешными ответами GET.

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

Answer 1

Вы начинаете с простого маршрута get('/'){}, который содержит сообщение по умолчанию (или любой другой маршрут GET). Затем у вас есть другие маршруты GET, которые вы хотите отобразить на своем маршруте по умолчанию. В Sinatra вы можете проверить, является ли запрос xhr-запросом или нет с request.xhr?. Если у вас есть запрос xhr, вы возвращаете значение json для своего представления, в противном случае отклоняете запрос или визуализируете представление с надлежащим html. Это на вашей синатровой основе. В ваших представлениях вы можете использовать JQuery или любую другую JS-библиотеку или обычную JS для обработки асинхронных запросов данных. Вы можете использовать функцию ajax в JQuery для запроса данных с ваших маршрутов, а затем добавить их в DOM. Это так просто:

Теперь вам нужно будет исследовать на сайте JQuery, как делать запросы ajax и добавлять данные в существующие DOM. Вот и все.