Flask框架实现前后端数据交互怎么做？Python框架flask数据交互代码

罗西汉 2022-10-17 10:11:18 优草派

python之中只要是开发web应用程序基本上使用的就是flask以及Django这两个框架，而它们都能够实现一个完整网页程序的开发。但是web程序又会涉及到前后端数据交互的问题，所以这篇文章小编会来给大家详细的讲解一下python框架flask如何完成数据交互代码编写。

1.首先在pycharm编辑器或者是其他的开发工具之中用flask框架构建出基本的项目结构之后，会在temp文件目录下有好几个文件夹。在这些文件夹之中将templates打开并且选择下面的index.html文件，这个就是用来接收和显示数据的网页源代码文件，代码示例如下所示：

<div class="transfer">
    <button class="btn" id="swap">转换</button>    
</div>
<p id="display">{{ temp }}</p>

在以上的代码之中最关键的就是两个花括号以及其中的temp，它表示的意思是占位符，从后台python程序中传递上来的数据会显示在这里。如果有使用过PHP语言开发，或者是C#中webform开发方式的小伙伴对其应该很熟悉。

2.除此之外还需要去写一个JavaScript的脚本来导入，这样才能够在点击按钮时实现文本显示的效果。在刚才代码的下方加上一个script标签，然后在其中编写代码，示例如下：

<script>
const swap = document.getElementById('swap');
function printPerson() {
    $.ajax({
         type: "POST",
         url: "/index",
         dataType: "json",
         data:{"person": person.value},
         success: function(msg)
         {
             console.log(msg);
             $("#display").text(msg.person);
         },
         error: function (xhr, status, error) {
            console.log(error);
        }
    });
}
swap.addEventListener('click', printPerson);
</script>

3.最后要写的就是python之中的代码，将项目文件目录之中的app.py文件打开，如果没有的话就新建一个。然后在下面写入如下代码，详细示例如下所示：

from flask import Flask, render_template, request
app = Flask(__name__)
@app.route('/')
@app.route("/index", methods=['GET', 'POST'])
def index():
    message = "选择的人物为："
    if request.method == 'POST':
        person = str(request.values.get("person"))
        return {'person': person}
    return render_template("index.html", temp=message)
if __name__ == '__main__':
      app.run(host='0.0.0.0', port=8987, debug=True)

在这些代码之中关键的一行代码是route()内的第一个参数，它表示将连接到哪一个路由，也就是框架内的哪一个网页。第二个就是template()方法内的两个参数了，其中第一个表示要传输数据的html页面，第二个则是将该数据传输到哪一个位置上，temp和html文件中的占位符相同。

以上就是关于“Flask框架实现前后端数据交互怎么做？Python框架flask数据交互代码”的全部内容了，希望对你有所帮助。