Flask怎么把前端table中的值传到后端？

HelloFlask Flask Web 开发实战
1

新手刚学Flask，自己写个小工具练手遇到以下问题：
想实现以下功能：

image
image1274×253 39.9 KB

点击重启按钮怎么把ID值传到后端？

部分前端：

<form action="restart" enctype="multipart/form-data" method="post">
  <table class="table table-bordered" >
    <tr>
        <th>ID</th>
        <th>应用ID</th>
        <th>应用名称</th>
        <th>操作</th>
    </tr>
    {% for i in sql_res %}
        <tr>
            <td>{{ i[0] }}</td>
            <td>{{ i[1] }}</td>
            <td>{{ i[2] }}</td>
            <td>
                <button type="button" class="btn btn-info btn-sm editbtn" data-itemId="{{ i[0] }}">重启</button>
                <script>
            $('.editbtn').on('click', function(){
                var Id = $(event.target).data("{{ i[0] }}");
            });
            </script>
            </td>
        </tr>
    {% endfor %}
  </table>

后端：

@app.route('/restart/', methods=['GET', 'POST'])
def restart():
# 这里怎么获取到前端的ID值啊？？
return "yes"
2

前端使用 AJAX 发送 POST 请求。建议你把这部分代码封装成函数，比如：

<script>
    function restart(e) {
        var $el = $(e.target);
        $.ajax({
            method: 'POST',
            url: {{ url_for('restart')|tojson }},
            data: {id: $el.data('itemId')}
        }).done(function() {
            alert( "success" );
        });
    }
</script>

然后监听对 editbtn 类的点击操作，并触发 restart 函数：

<script>
    function restart(e) {
        // ...
    }

    $('.editbtn').on('click', restart.bind(this))
</script>

我有点忘记这里怎么写了，你自己再确认一下。

后端在视图函数里从 request.form 属性获取提交的数据（前端使用 data 参数传递的值没有指定 Content-Type 时会默认作为表单形式提交）：

from flask import request

@app.route('/restart/', methods=['POST'])
def restart():
    id = request.form.get('id')
    # ...
    return "yes"
2 个赞
3

可以参考楼上李老师地标答。我自己也写过非函数形式（就是顺着你的写法往下）

//这部分应当单独放在一个script便签里，不要紧跟在<button>后面
<script>
$('.editbtn').on('click', function(){
    var Id = $(this).attr("data-itemId"); //获取被点击button所在行的id或者你事先绑定在的button上的属性，比如这里的data-itemId
    //修改的部分，比较简单理解的形式，但还是应当包装成函数
    data = {
        "id": JSON.stringify(Id);
    } //包装成了json格式，如果你只有一个id，那不用json格式，像李老师那样直接把值写上去，后台也不用解json格式
    $.ajax({
    type: "post",  //可以是get方法，如果你传输的数据并不重要并且你传输的数据较少
    async: false, //
    url: “{{ url_for("restart") }}”,  //这里你也可以继续添加参数比如url_for("restart", id=一个id)
    data: data, 
    timeout: 1000,
    success: function (return_message) {
        console.log(JSON.parse(return_message)); //如果后台传回的是json数据才需要读取，否则就直接log打印
    },
    error: function (error_message) {
        console.log(error_message);  //同上
   }
});
</script>

后台：

from flask import request, json, jsonify  //flask内有对python自带json升级过的版本以及jsonify这样快速打包json的对象
@app.route('/restart/', methods=[''POST'])
def restart():
    id = json.loads(request.form.get("id")) //如果前台传入的非json，那不用loads直接获取
    return jsonify(message="success")

上面没有做过测试，仅作参考:rofl:，特别是少个括号啥的，我直接在网页上打的:rofl:

2 个赞
4

非常感谢二位老师，学到了！之前实在是解不了只好用超链接的方式:sweat:。感谢感谢！！！

2 个赞