如何将两个参数传递给由 ajax 函数调用的 python 函数？

Posted 2023-05-08

【中文标题】如何将两个参数传递给由 ajax 函数调用的 python 函数？

【英文标题】：How to pass two arguments to a python function that is being called by ajax function?

【发布时间】：2021-09-02 05:13:45

【问题描述】：

我正在使用 Flask 制作一个网络应用程序，并希望在单击按钮并且页面不重新加载时调用此函数：

@app.route('/add_song_to_playlist')
def add_song_to_playlist(pl_id, s_id):
    sp = songs_playlists(song_id = s_id, playlist_id = pl_id)
    db.session.add(sp)
    db.session.commit()
    return "nothing"

但是它需要两个参数，我不知道如何在 ajax 函数中传递它们。我还需要它们像带有 的内联 python 代码。

这是模板和按钮中的 ajax 函数，以及我尝试作为 getJSON() 采用的“数据”参数传递的内容：

<div class="dropdown-menu dropdown-menu-right float-left">
    <a class="dropdown-item" href=" url_for('make_playlist') "> Create a new playlist </a>
    % for p in pl %
    <form>
        <a class="dropdown-item" href="#" id=add_song>  p.playlist_name  </a>
    </form>
    <script type=text/javascript>
        $(function() 
            $('a#add_song').on('click', function(e) 
            e.preventDefault()
            $.getJSON('/add_song_to_playlist', );
            return false;
            );
        );
    </script>
</div>
% endfor %

但似乎不起作用，我什至没想到它会起作用。我阅读了关于这个函数的 jquery 文档，但它没有提到将两个参数作为 python 代码传递（可能是因为我缺乏 JS 知识）。任何帮助将不胜感激！

【问题讨论】：

您可以在 URL、查询参数或正文中传递参数。有许多不同的格式可以在正文中传递参数。 Flask 将 URL 段传递给函数调用，例如@app.route('/add_song_to_playlist/<pl_id>/<s_id>')

【参考方案1】：

你可以像这样指定路由参数：

@app.route('/add_song_to_playlist/<pl_id>/<s_id>', methods=['POST'])
def add_song_to_playlist(pl_id, s_id):
    sp = songs_playlists(song_id = s_id, playlist_id = pl_id)
    db.session.add(sp)
    db.session.commit()
    return "nothing"

您的 http 调用应如下所示：https://server_ip/add_song_to_playlist/playlist_id/song_id

看这里：https://pythonbasics.org/flask-tutorial-routes/

或者您可以通过 post call 的正文传递它们，然后按如下方式访问它们：

@app.route('/add_song_to_playlist', methods=['POST'])
def add_song_to_playlist():
    pl_id = request.form.get('pl_id')
    s_id = request.form.get('s_id')
    sp = songs_playlists(song_id = s_id, playlist_id = pl_id)
    db.session.add(sp)
    db.session.commit()
    return "nothing"

或者，也可以通过获取请求：https://server_ip/add_song_to_playlist?playlist_id=pl_id&song_id=s_id

@app.route('/add_song_to_playlist', methods=['GET'])
def add_song_to_playlist():
    pl_id = request.args.get('pl_id')
    s_id = request.args.get('s_id')
    sp = songs_playlists(song_id = s_id, playlist_id = pl_id)
    db.session.add(sp)
    db.session.commit()
    return "nothing"

在我看来，管理相关呼叫的最佳方式是第一个。

【讨论】：

是的，现在我需要为函数传递必要的参数。我需要的参数来自我在渲染此模板时从后端获得的 2 个列表。所以我知道它是如何完成的，但我需要这样的东西： $.getJSON('/add_song_to_playlist', song.name , p.playlist_name ) IDK 如果我解释得好的话。

对不起，我在评论没有完成的时候不小心上传了。现在它被编辑了。

如果你能得到播放列表ID和歌曲ID看这里（如何用ajax发出hhtp请求）：w3schools.com/xml/ajax_xmlhttprequest_send.asp

我要么因为我缺乏知识而无法理解你，要么你我无法解释我试图做什么。我有一个模板，我传递了两个列表，这些列表是来自两个表的所有查询 - 歌曲和播放列表，因此我可以使用它们来显示歌曲和播放列表，这是通过像 .html 文件中那样迭代这些列表来完成的：@ 987654327@。然后我有一个按钮，我想在不重新加载页面的情况下调用一个函数 onclick，它接受两个列表中的元素作为参数。当我在 AJAX func 中调用函数时，我不知道如何传递 2 个参数

如果您需要知道如何在从您的 html 页面按下按钮后检索您的播放列表 ID 和歌曲 ID，请查看：youtube.com/watch?v=I2dJuNwlIH0