首页 文章

在Python Flask中传递Javascript数组

提问于
浏览
0

我正在使用 python flask 开发和应用程序,我想将 Javascript 函数(数组)的返回值发送到 python 函数 . 以下是代码 .

Javascript

<script>
  function getVals(){
      a = [ab, cd];
      return a;
  }
</script>

HTML

<a href="/end_stu_live_session">End This</a>

Python

@app.route('/end_stu_live_session')
def end_stu_live_session():
   return render_template('stu_dashboard.html')

我希望将Javascript函数 getVals() 中的数组传递给python函数 end_stu_live_session . 任何帮助都非常感谢 . 谢谢 .

1 回答

  • 0
    • 您可以通过Ajax将Javascript函数(数组)的返回值作为JSON发送到Python方法 .

    • 从AJAX发送 contentType: 'application/json' 并在Flask中以 request.json 接收数据 .

    app.py:

    from flask import Flask, render_template, request, jsonify
    
    app = Flask(__name__)
    
    @app.route('/end_stu_live_session',methods=["GET", "POST"])
    def end_stu_live_session():
        if request.method == 'POST':
            data = request.json
            return jsonify(data)
        return render_template("home.html")
    
    app.run(debug=True)
    

    home.html:

    <html>
        <head>
            <title>Flask Ajax</title>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        </head>
        <body>
            <div id="data"></div>       
            <button id="demo_btn">Dummy button</button>
            <script>
                function getVals(){
                      a = ["ab", "cd"];
                      return a;
                }
                $(document).ready(function () {
                    $("#demo_btn").on("click", function() {
                        var js_data = JSON.stringify(getVals());
                        $.ajax({                        
                            url: '/end_stu_live_session',
                            type : 'post',
                            contentType: 'application/json',
                            dataType : 'json',
                            data : js_data
                        }).done(function(result) {
                            console.log(result);
                            $("#data").html(result);
                        }).fail(function(jqXHR, textStatus, errorThrown) {
                            console.log("fail: ",textStatus, errorThrown);
                        });
                    });
                });
            </script>       
        </body>
    </html>
    

    Output:

相关问题