开始免费使用
当前位置：首页 > Python > Flask框架运用Ajax实现数据交互的示例代码

Flask框架运用Ajax实现数据交互的示例代码

一只小鹿
一只小鹿
发布时间：2026-10-16| 12人浏览过
原创

本文详细介绍如何利用Flask框架与Ajax技术实现高效的前后端数据通信。内容涵盖字符串传输、JSON格式数据处理以及携带Token的安全交互场景，通过前端JavaScript与后端Python代码的完整示例，展示如何在无需刷新页面的情况下快速响应用户操作，适用于Web应用开发中的数据异步交互需求。

借助Ajax技术，Web应用能够在不重载整个页面的前提下，将增量更新即时呈现给用户界面。这种机制显著提升了程序对用户操作的响应速度，下文笔记将简要阐述如何利用AJAX完成前后端之间的数据通信流程。

前后端发送字符串

前端代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
	<script src="https://cdn.lyshark.com/javascript/jquery/3.5.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function SendAjax(){
            $.ajax({
                url:"/",
                contentType: "POST",
                data:{"head":"hello lyshark"},
                success:function(data){
                    if(data=="1"){
                        alert("请求已经提交.");
                    }
                },
                error:function(){
                     alert("执行失败了...")
                }
            });
        }
    </script>
    <form action="/" method="post">
        <input type="button" value="发送数据" onclick="SendAjax()">
    </form>
</body>
</html>

Flask后端代码实现

from flask import Flask,render_template,request
import json

app = Flask(import_name=__name__,
            static_url_path='/python',   # 配置静态文件的访问url前缀
            static_folder='static',      # 配置静态文件的文件夹
            template_folder='templates') # 配置模板文件的文件夹

@app.route('/', methods=["GET","POST"])
def index():
    if request.method == "POST":
        # 接收数据
        token = request.headers.get("Authorization")
        json_value = request.get_json()
        print(f"token = {token} username = {json_value['username']} password = {json_value['password']}")

        # 发送数据
        info = dict()
        info["status"] = "success"
        info["page"] = "/test/lyshark"
        return jsonify(info)

    else:
        return render_template("index.html")

if __name__ == '__main__':
    app.run(host="127.0.0.1", port=80, debug=False)

前后端发送JSON数据

前端代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.lyshark.com/javascript/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

    <script type="text/javascript">
        function SendAjax()
        {
            var username = $('input[name="username"]').val();
            var password = $('input[name="password"]').val();
            $.ajax({
                url:"/",
                type: "POST",
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                headers: {"Authorization": "1a2cEFgh"},                              <!--此处携带token-->
                data: JSON.stringify({"username":username,"password":password}),     <!--此处携带JSON-->
                success:function(result)
                {
                    console.log("状态码: " + result.status + " 页面: " + result.page);
                },
                error:function()
                {
                     console.log("执行失败了");
                }
            });
        }
    </script>

    <!--提交数据-->
    <form action="/" method="post">
        用户账号: <input type="text" placeholder="用户账号" name="username" /><br><br>
        用户密码: <input type="text" placeholder="用户密码" name="password" /><br><br>
        <input type="button" value="发送数据" onclick="SendAjax()">
    </form>
</body>
</html>

Flask后端代码实现

from flask import Flask,render_template,request
from flask import jsonify

app = Flask(import_name=__name__,
            static_url_path='/python',   # 配置静态文件的访问url前缀
            static_folder='static',      # 配置静态文件的文件夹
            template_folder='templates') # 配置模板文件的文件夹

@app.route('/', methods=["GET","POST"])
def index():
    if request.method == "POST":
        # 接收数据
        token = request.headers.get("Authorization")
        json_value = request.get_json()
        print(f"token = {token} username = {json_value['username']} password = {json_value['password']}")

        # 发送数据
        info = dict()
        info["status"] = "success"
        info["page"] = "/route/lyshark"
        return jsonify(info)

    else:
        return render_template("index.html")

if __name__ == '__main__':
    app.run(host="127.0.0.1", port=80, debug=False)

发送数据并携带token

前端代码部分实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.lyshark.com/javascript/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <script type="text/javascript">
        function SendAjax(){
            var token = $('input[name="token"]').val();
            $.ajax({
                url:"./dataFromAjax",
                type: "POST",
                contentType: "application/json;charset=utf-8",
                headers:{"Authorization":token},   <!--此处携带token-->
                success:function(result){
                    alert("执行成功...");
                },
                error:function(){
                     alert("执行失败了...");
                }
            });
        }
    </script>

    <!--提交数据-->
    <form action="/dataFromAjax" method="post">
        设置token: <input type="text" placeholder="用户账号" name="token" /><br>
        <input type="button" value="发送数据" onclick="SendAjax()">
    </form>
</body>
</html>

Flask后台部分实现

from flask import Flask,render_template,request
from flask import jsonify

app = Flask(import_name=__name__,
            static_url_path='/python',   # 配置静态文件的访问url前缀
            static_folder='static',      # 配置静态文件的文件夹
            template_folder='templates') # 配置模板文件的文件夹

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

@app.route("/dataFromAjax",methods=['POST'])
def recv():
    token = request.headers.get("Authorization")
    print(token)
    return  render_template("index.html")

if __name__ == '__main__':
    app.run(host="127.0.0.1", port=80, debug=False)

收发JSON格式字符串

前端部分实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.lyshark.com/javascript/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <script type="text/javascript">
        function GetAjax(){
            $.ajax({
                url:"/dataFromAjax",
                contentType: "GET",
                success:function(data){
                    alert("姓名: " + data.name + "年龄: " + data.age);
                },
                error:function(){
                    alert("执行失败了...")
                }
            });
        }
    </script>

    <!--提交数据-->
    <input type="button" class="MyButton" value="接收数据" onclick="GetAjax()">
</body>
</html>

Flask后端部分实现

from flask import Flask,render_template,request
from flask import jsonify

app = Flask(import_name=__name__,
            static_url_path='/python',   # 配置静态文件的访问url前缀
            static_folder='static',      # 配置静态文件的文件夹
            template_folder='templates') # 配置模板文件的文件夹

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

@app.route("/dataFromAjax",methods=["GET","POST"])
def set():
    info = dict()
    info['name'] = "lyshark"
    info['age'] = 22
    return jsonify(info)

if __name__ == '__main__':
    app.run(host="127.0.0.1", port=80, debug=False)

以上就是Flask框架运用Ajax实现数据交互的示例代码的详细内容，更多关于Flask Ajax数据交互的资料请关注本站其它相关文章！

相关文章

相关标签: Python Flask Ajax Web开发 JSON

免责声明：本文内容仅供参考，不代表本站观点。转载或引用请注明出处。

作者最新文章

全部文章

Python 相关产品和应用

全部下载
PythonSelenium
Selenium

Selenium

4.51.0 · Windows

用于浏览器自动化和 Web 测试的 Python 工具。

Python机器学习
scikit-learn

scikit-learn

1.9.1 · Windows

常用 Python 机器学习算法与模型评估工具库。

Python代码质量
Black

Black

26.10.1 · Windows

强调一致性的 Python 自动代码格式化工具。

Python代码质量
Ruff

Ruff

0.17.1 · macOS

由 Rust 编写的高速 Python 代码检查和格式化工具。

Pythonpytest
pytest

pytest

9.1.1 · Windows

简洁而强大的 Python 自动化测试框架。

PythonFastAPI
FastAPI

FastAPI

0.146.0 · Windows

高性能 Python API 框架，支持类型提示和自动接口文档。

PythonFlask
Flask

Flask

3.1.3 · Windows

轻量灵活的 Python Web 应用框架。

PythonDjango
Django

Django

6.1.2 · Windows

成熟的 Python Web 框架，适合构建内容站点和业务系统。

PythonSpyder
Spyder

Spyder

6.1.7 · Windows

面向科学计算与数据分析的 Python 集成开发环境。

PythonSciPy
SciPy

SciPy

1.18.1 · Windows

面向科学、工程和技术计算的 Python 算法库。