如何知道以烧瓶形式按下了哪个按钮？ （烧瓶，HTML）

Question

我使用了一个 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") 上点击“Like”，那么我将提取该歌曲的链接并在我的后端使用它。我不确定如何让每个按钮与我的烧瓶应用程序的请求相对应，所以当用户点击“喜欢”时，我知道他们的意思是歌曲 #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'

任何建议表示赞赏

Answer 1

你可以做一个小技巧 - 使用like / dislike按钮向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收到了结果，以某种方式处理它