Веб-приложение для флэш-карт: хотите загрузить колоду для изучения на основе выбранной колоды

#javascript #python #html #flask

Вопрос:

Я работаю над приложением для карточек, используя колбу. Это похоже на Анки, если вы знаете об этом. Когда я нажимаю на колоду, я хочу, чтобы она переходила в study_session.html где отображается первая карта выбранной колоды. В настоящее время у меня есть домашний экран, на котором перечислены колоды пользователей. Каждый элемент списка-это элемент кнопки с атрибутом onclick, который вызывает метод javascript, использующий имя выбранной колоды в качестве параметра. Метод отправляет запрос post на маршрут колбы «/учебная сессия» вместе с названием колоды. Это позволяет методу маршрута получить выбранную колоду и отправить соответствующую флэш-карту в «study_session.html» страница для отображения. Что не так, так это то, что либо метод javascript, либо метод маршрута на стороне сервера, либо оба, похоже, не выполняются. Когда я нажимаю на колоду, которую хочу изучить, ничего не происходит. Я хотел бы, чтобы кто-нибудь указал на мою ошибку и предложил соответствующее исправление. Если мне нужен ajax, пожалуйста, покажите мне, как будет выглядеть javascript. Спасибо.

Вот html-код, в котором есть кнопка с атрибутом onclick:

 {% for deck in user.decks %}
    <li class="list-group-item">
        <button class="btn btn-link pl-0" onclick="startStudySession({{ deck.deck_name }})">{{deck.deck_name}}</button>
 

Вот javascript:

 // Takes deckId and sends post req to study-session route.
// Then runs study-session view
function startStudySession(deckName) {
    // Specify what route to send request to
    fetch("/study-session", {
        method: "POST",
        body: JSON.stringify({deckName: deckName})
    }).then((_res) => {
        window.location.href = "/study-session"
    });
}
 

Вот метод маршрута на сервере python:

 @views.route('/study-session', methods=['GET', 'POST'])
def study_session():
    """
    Renders study_session page with one flashcard displayed. Handles all requests on study_session page.
    """
    request_data = json.loads(request.data)
    cur_deck = current_user.get_deck(request_data['deckName'])
    cur_card = cur_deck.notes[0].flashcards[0]
    front = cur_card.front_text
    back = cur_card.back_text
    print("is this working?")
    return jsonify('', render_template("study_session.html", user=current_user, front=front, back=back))
 

Комментарии:

1. Не могли бы вы поделиться ссылкой на Anki?

2. ankiweb.net/about Вам придется создать учетную запись, чтобы увидеть, как это выглядит.