一个Flask AJAX请求的示例

Botiway

于 2024-09-30 07:44:55 发布

阅读量405

点赞数 4

分类专栏： FlaskWeb 文章标签： python flask web app linux 经验分享

本文链接：https://blog.csdn.net/umut9/article/details/142647603

版权

FlaskWeb 专栏收录该内容

381 篇文章 0 订阅

订阅专栏

当然可以，以下是一个完整的Flask AJAX请求的示例，包括前端HTML和JavaScript代码以及Flask后端代码。

前端HTML和JavaScript代码

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask AJAX 示例</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("#submit-btn").click(function(e){
            e.preventDefault(); // 阻止表单的默认提交行为
            $.ajax({
                url: '/ajax_endpoint', // Flask路由的URL
                type: 'POST', // 请求类型
                data: { // 发送到服务器的数据
                    name: $('#name-input').val(),
                    age: $('#age-input').val()
                },
                success: function(response) { // 请求成功时的回调函数
                    $('#result').text(response.message); // 更新页面元素
                },
                error: function(xhr, status, error) { // 请求失败时的回调函数
                    alert("Error: " + error);
                }
            });
        });
    });
    </script>
</head>
<body>
    <input type="text" id="name-input" placeholder="输入你的名字">
    <input type="number" id="age-input" placeholder="输入你的年龄">
    <button id="submit-btn">提交</button>
    <p id="result"></p>
</body>
</html>

Flask后端代码

python

from flask import Flask, request, jsonify

app = Flask(__name__)

@app.route('/ajax_endpoint', methods=['POST'])
def ajax_endpoint():
    name = request.form['name']  # 读取表单字段
    age = request.form['age']
    # 这里可以添加更多的逻辑来处理请求
    return jsonify({'message': f'Hello, {name}! You are {age} years old.'})

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

注意：在上面的Flask后端代码中，我使用了request.form来读取表单数据，因为前端是通过传统的表单数据（application/x-www-form-urlencoded）发送的，而不是JSON。如果你想要以JSON格式发送数据，你需要修改前端JavaScript代码中的contentType和data部分，并在Flask后端使用request.json来读取数据，就像我之前在示例中展示的那样。

但是，为了保持示例的简单性，这里我使用了传统的表单数据发送方式。如果你想要使用JSON，请参照之前的示例进行调整。

另外，请确保你的Flask应用正在运行，并且你正在通过正确的URL（在这个例子中是http://127.0.0.1:5000/，假设你使用的是默认端口5000）访问前端HTML页面。当你填写表单并点击提交按钮时，Ajax请求将被发送到Flask服务器，服务器将处理请求并返回响应，然后前端JavaScript将更新页面元素以显示响应消息。

《Flask Web 应用开发项目实战基于 Python 和统信 UOS》是一本由木合塔尔·沙地克所著，由人民邮电出版社于2024年出版的书籍。这本书通过一个完整的项目开发案例，系统介绍了在统信UOS操作系统上进行Flask Web应用开发的过程。它不仅详细分析了用户功能、管理功能、数据分析与可视化、数据库管理的代码实现，还介绍了搭建服务器的流程与模块化编程。