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数据传到前端,注意浏览器相应体中的内容类型,(以上截图中标红区域)

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

    


版权声明:本文为u010197393原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。