1. 程式人生 > >Flask框架前端後端互動之傳遞Json資料

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資料傳到前端,注意瀏覽器相應體中的內容型別,(以上截圖中標紅區域)

   此文章只用於個人做筆記,如有路過大神有不同的意見,請指出!