Flask框架前端后端交互之传递Json数据

 

方案一：后端使用   jsonify（）方法  响应前端Json数据

 

   后端代码：

# encoding:utf-8
from flask import Flask, render_template, url_for, request, json,jsonify


app = Flask(__name__)
#设置编码
app.config['JSON_AS_ASCII'] = False


#接收参数，并返回json数据
@app.route('/sendDate', methods=['GET', 'POST'])
def form_data():

   #从request中获取表单请求的参数信息
   title = request.form['title']
   datetime = request.form['datetime']
   quiz = request.form['quiz']
   
   #此处逻辑代码已经省略...................

   return jsonify({'status': '0', 'errmsg': '登录成功！'})


#测试入口
@app.route('/test')
def hello_world():
    return 'Hello World!'


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

前端代码：

 $.ajax({
          url:'http://127.0.0.1:5000/sendDate',
   
       data:"title="+data.field['title']+"&datetime="+data.field['datetime']+"&quiz="+data.field['quiz'],
          type:'post',
          dataType:'json',
          success:function(data){ //后端返回的json数据（此处data为json对象）
              alert(data['errmsg']);
          },
          error:function () {
              alert('异常')
          }
      });

   注意：1、如果返回的Json数据有中文，需要配置编码 ，本示例直接配置在了当前程序py文件中了

                

#设置编码
app.config['JSON_AS_ASCII'] = False

       2、使用jsonify（）返回直接是一个json对象，前端有需要直接就可以通过对象获取

         

 

 

方案二 ：使用   json.dumps(）响应前端Json数据  

   后端代码：

# encoding:utf-8
from flask import Flask, render_template, url_for, request, json,jsonify


app = Flask(__name__)


#接收参数，并返回json数据
@app.route('/sendDate', methods=['GET', 'POST'])
def form_data():

   #从request中获取表单请求的参数信息
   title = request.form['title']
   datetime = request.form['datetime']
   quiz = request.form['quiz']
   
   #此处逻辑代码已经省略...................
   return json.dumps({'status': '0', 'errmsg': '登录成功！'},ensure_ascii=False)



#测试入口
@app.route('/test')
def hello_world():
    return 'Hello World!'


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

  前端代码：

    

  $.ajax({
          url:'http://127.0.0.1:5000/sendDate',
          data:"title="+data.field['title']+"&datetime="+data.field['datetime']+"&quiz="+data.field['quiz'],
          type:'post',
          dataType:'json',
          success:function(data){
              alert(data['status']);
          },
          error:function () {
              alert('异常')
          }
      });

注意：以下标红区域

   

 

 

总结：这两种方法都可以将json数据传到前端，注意浏览器相应体中的内容类型，（以上截图中标红区域）

   此文章只用于个人做笔记，仅供参考 ，如有路过大神有不同的意见，请指出！