18910140161

FlashCard WebApp:要根据选定的甲板加载一个甲板以学习

顺晟科技

2021-08-06 11:19:25

45

我正在使用Flask开发一个抽认卡应用程序。它类似于安基,如果你知道这一点。当我单击一副牌时,我希望它转到study_session.html,在那里它显示所选副牌的张牌。目前,我有一个主屏幕,列出了用户的甲板。每个列表项都是一个带有onclick属性的button元素,该属性调用一个javascript方法,该方法将所选甲板的名称作为参数。该方法向烧瓶路由“/studie-session”发送一个post请求以及甲板的名称。这允许路由的方法获得选定的甲板,并将适当的抽认卡发送到要显示的“study_session.html”页面。问题是javascript方法或服务器端路由方法,或者两者似乎都没有执行。当我点击我想学习的甲板时,什么也没发生。我希望有人指出我的错误,并提供适当的解决办法。如果我需要ajax,请告诉我javascript是什么样子的。谢谢。

下面是带有onclick属性的按钮的html:

{% 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))

顺晟科技:

  • TAG:
相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航