自学 Flask 系列（三）通过ajax实现前后端 json 数据交互

最新推荐文章于 2022-08-14 15:24:51 发布

sage_wang

最新推荐文章于 2022-08-14 15:24:51 发布

阅读量2.6k

点赞数

分类专栏：自学Flask 文章标签： flask

本文链接：https://blog.csdn.net/sage_wang/article/details/109055214

版权

自学Flask 专栏收录该内容

5 篇文章 8 订阅

订阅专栏

本文介绍如何在Flask应用中使用Ajax进行JSON数据的前后端交互，通过前端js代码和后端Flask处理逻辑，演示了一个简单的数据交互Demo，确保数据传递的正确性和防止出现转义字符、乱码问题。

摘要由CSDN通过智能技术生成

在web 中经常会遇到前后端数据交互的问题，这个时候就离不开ajax 。
ajax中经常用到的数据格式是json，可以防止出现转义字符，乱码等问题。

本文简单的展示一个demo，用ajax 来前后端 json格式数据进行交互。

前端 js 代码

        $('#cc').click(function () {
            data_dict = {
                'name1': 'aaaa1','name2': 'aaaa2','name3': 'aaaa3','name4': 'aaaa4'//要发送的字典，在JavaScript里被定义为对象
            }; //传输数据
            $.ajax({
                type: 'POST',
                url: '/send',
                data: JSON.stringify(data_dict),//将对象打包成json的字符串发送，对应下面也要将字符串解码成字典
                contentType: 'application/json;charset=UTF-8',//编码格式
                dataType: 'json',
                success: function (data) {
                    console.log(typeof(data["calc"]));//打印为字符串
                    console.log(data["calc"]);//打印为对象object
                }
            })
        })

后端 flask 处理逻辑

from flask import Flask,render_template, request, url_for, jsonify
import os
import json
import sys
import subprocess

app = Flask(__name__)//与下面的  app.run()对应
app.config['SECRET_KEY'] = "dfdfdffdad"

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

@app.route('/send', methods=['POST'])
def upload_file():
    a=request.get_data()//得到JavaScript发送的字符串流
    print(type(a))//bytes
    s1 = str(a, encoding='utf-8')//解码为string
    print(type(s1))
    print(s1)
    user_dict1 = json.loads(s1)//将string变成dict
    for key in user_dict1.keys():
        print(key,user_dict1[key])
    user_dict = json.loads(a)//将bytes变成dict
    
    for key in user_dict.keys():
        print(key,user_dict[key])
    dict4={"calc":"success"}
    return jsonify(dict4)

if __name__ == '__main__'://flask实例化，上面相当于类的子函数
    app.run()

前台接受成功的话，会在web 控制台输出返回的 “success”。