1

Всем привет. Прошу помощи. Пишу на python, js вижу 3 раз в жизни. Есть 2 функции, кот кое-как сам написал на js прямо в html.Они получаю данные из модели и отображают на страницу. По итогу, при переходе на страницу, выводится 100 позиций из бд. Понимание фронта на уровне бутстрапа(

function getPage(offset, limit) {
    // получает страничку по параметрым
    var xhr = new XMLHttpRequest()
    xhr.open(
        'GET',
        'http://localhost:8000/books?offset=1&limit=100'
    )
    xhr.send()
    xhr.onload = function() {
        if (xhr.status == 200) {
            render(JSON.parse(xhr.response))
        }
    }
}

getPage(1, 5)

function render(books) {
    // добавлфет э-ты на стр из букс
    for (var i = 0; i < books.length; i++) {
       var item = document.createElement('div');
       item.classList = ['book']
       item.innerText = 'title: ' + books[i]['title'];
       document.getElementById('content').appendChild(item);
    }
}

выводится шаблонные данные

    title: some title 1
    title: some title 2
    title: some title 3
    title: some title 4
    и т. д.

Как я могу обращаться к этим данным, чтобы использовать их, к примеру для оформления? В той же django (через контекст во вью) я мог, используя jinja обращаться к этим данным, но у меня сам js в html выводит весь список данных. Мне нужно как-то примитивно оформить, используя эти данные.

Читаю сейчас про прокрутка, не понятно, как ее реализовать, сейчас у меня на страницу выводится сразу 100 позиций, а мне нужно сделать так, чтобы они выводились динамически, то есть по мере того, как пользователь листает вниз они загружались, показывая какой-н. простой прелоадер. Как это сделать? Читаю здесь https://learn.javascript.ru/onscroll.

4
  • 1
    Вопрос несколько сумбурен - лучше привести в порядок свои мысли и текст. Тяжело понять суть основных вопросов. Из того, что я понял: догрузка данных на лету - это фактически получение данных по ajax. То есть, на onscroll вешается обработчик, который по событию запрашивает порцию данных, получает их и дорисовывает вниз страницы. На стороне бека это выглядит как простоя функция, возвращающая ответ с порцией json-данных.
    – cauf
    16 ноя 2020 в 6:49
  • Первое, я не знаю ничего ни про js, ни про ajax. Бэк у меня написан. Мне нужно разобраться именно на стороне фронта. Сами вопросы. Сейчас у меня на HTML странице сразу все данные, кот выводит js функции. Как я могу использовать эти данные для оформления, как мне к ним обращаться, я не знаю? Второй, как реализовать чтобы эти данные ,кот выводятся сразу, выводились по мере пролистывания пользователем страницы, показывая прелоадер? 16 ноя 2020 в 6:58
  • Ну вот вам и пара кейвордов для гуглинга на предмет расширения своих знаний! Серьезно, интерактив написать без изучения этих тем просто нереально. Хотя для облегчения головной боли могу посоветовать jquery - многие скажут, что он морально устарел и вообще не нужен, но не слушайте - он снимает кучу головняка и достаточно прост для базовых задач.
    – cauf
    16 ноя 2020 в 7:00
  • суть в этого обучающего задания, не чтобы js освоить, а чтобы увидеть связь, но мно дополнительного приходится читать, поэтому сюда и обратился. Поскольку до этого, я писал только бэк на джанго, используя простые шаблоны из бустрапа. В любом случае, спасибо за помощь. 16 ноя 2020 в 7:04

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.