python使用flask与js进行前后台交互的例子

下面就是详细讲解“python使用flask与js进行前后台交互的例子”的完整攻略。

首先我们需要搭建一个基于Flask框架的web应用，Flask是一种简单而灵活的python web框架，有很好的扩展性，适合中小型web项目的开发。

搭建Flask框架：

from flask import Flask, request, jsonify, render_template

app = Flask(__name__)

@app.route("/")
def index():
    return render_template("index.html")

if __name__ == '__main__':
    app.run(debug=True)

这段代码的功能是搭建一个Flask框架，同时渲染一个名为“index.html”的模板文件，并启动服务器。

前端界面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flask and JS</title>
</head>
<body>
    <input type="text" id="input-name">
    <button id="submit-btn">submit</button>
    <p id="result"></p>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $('#submit-btn').click(function () {
            var inputName = $('#input-name').val();
            $.ajax({
                type: 'post',
                url: '/get-name',
                data: JSON.stringify({'name': inputName}),
                contentType: 'application/json',
                success: function (data) {
                    $('#result').text('Hello, ' + data)
                },
                error: function () {
                    $('#result').text('Something went wrong.')
                }
            })
        });
    </script>
</body>
</html>

这段代码是一个HTML模板，同时包括一个输入框、一个提交按钮、一个用于显示结果的段落，以及一段使用ajax进行后台交互的Javascript代码。

后端代码：

@app.route('/get-name', methods=['POST'])
def get_name():
    data = request.get_json()
    name = data['name']
    return jsonify(name)

这段代码是后台的处理逻辑，响应了来自前端的“/get-name”路由，将接收到的数据解析成一个JSON格式的对象，然后返回其中的“name”字段作为响应。这个功能非常简单，仅仅是一个示例，应该根据具体需求进行修改。

现在我们已经完成了这个例子的全部内容，我们可以先启动Flask服务器，再打开浏览器访问http://localhost:5000，就可以看到一个可以输入名称的输入框和一个按钮。在输入框中输入一个名称，点击按钮，就会在下方显示一个问候语“Hello, XXX”。

以上就是“python使用flask与js进行前后台交互的例子”的完整攻略，通过这个例子，你可以学习如何使用Flask和JS进行前后台交互。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：python使用flask与js进行前后台交互的例子 - Python技术站

python使用flask与js进行前后台交互的例子

相关文章