我使用了一个 for 循环来填充 Spotify 歌曲链接并将它们嵌入到网页中。每首歌曲后面都有一个名为“喜欢”和“不喜欢”的按钮 - 这是 html:
{% for (song_name, song_uri, submission_id) in songs: %}
<br>
<form action="" method="post">
<div name="song" value="{{submission_id}}, {{song_name}}"><iframe
src="https://open.spotify.com/embed/track/{{song_uri}}" height="80" frameborder="0"
allowtransparency="true" allow="encrypted-media"></iframe>
<input type="submit" value="Like"></input>
<input type="submit" value="Dislike"></input>
</form>
{% endfor %}
假设列出了 4 首歌曲,submission_id 分别为 1、2、3、4。 然后我想计算用户是否点击了特定歌曲的“喜欢”或“不喜欢”按钮。
如果用户在歌曲 #1 上点击“喜欢”(submission_id =“1”),那么我将提取该歌曲的链接并在我的后端使用它。我不确定如何让每个按钮对应来自我的 Flask 应用程序的请求,所以当用户点击“喜欢”时,我知道他们的意思是歌曲 #1 (submission_id = "1")。
到目前为止,我已经在我的烧瓶应用中尝试过这个:
@app.route('/curator', methods=["GET","POST"])
def curator():
songs = load_songs.load_songs()
if request.method == "POST":
song_number = request.form['submission_id']
然而,这会导致以下错误:
werkzeug.exceptions.BadRequestKeyError: 400 Bad Request: The browser (or proxy) sent a
request that this server could not understand.
KeyError: 'submission_id'
感谢任何建议
答案 0 :(得分:0)
你可以做一个小技巧——使用喜欢/不喜欢按钮向api发送请求并在请求正文中发送id,然后接受id进行处理。一个示例请求将是这样的:
GET: songs / like /? id = 1
创建上述api方法后,您可以通过以ajax请求的形式单击按钮来访问它,这将允许您在不刷新页面的情况下跟踪喜欢/不喜欢的数量,并且一般情况下,随心所欲
示例ajax:
var endpoint = 'songs/likes/?id={{submission_id}}'
$.ajax({
method: "GET",
url:endpoint,
success: function (result){
console.log("do something if successful, like display the next song")
})
最后,机制很简单。您将 id 设置为按钮,然后通过单击按钮,调用 ajax,它将使用歌曲 id 向 api 发出请求,将有关用户是否喜欢该乐曲的信息发送到后面,然后,已经通过后端的api收到了结果,以某种方式对其进行处理