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

目录

• 前后端发送字符串
• 前后端发送JSON数据
• 发送数据并携带token
• 收发JSON格式字符串

使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载刷新整个页面，这使得程序能够更快地回应用户的操作，如下笔记将简单介绍使用AJAX如何实现前后端数据通信。

前后端发送字符串

前端代码

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数据

前端代码

    
    
    



    

    
    

        用户账号: 


        用户密码: 


        
    

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

前端代码部分

    
    
    


    

    
    

        设置token: 

        
    

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格式字符串

前端部分

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数据交互的资料请关注脚本之家其它相关文章！