前端Vue与后端Flask数据交互

基础内容

Vue前端

 $.ajax({
          url:'http://127.0.0.1:5000/returnAllData',  // 后端地址
          type:'post',
          data:{'tablename': this.table_name},
          dataType:'json',
          success:function(data){ //后端返回的json数据（此处data为json对象）
            console.log('成功');
            console.log(data['info']);
          },
          error:function () {
            alert('异常')
          }
        });

Flask后端

@app.route('/returnAllData', methods=['GET', 'POST'])
def returnalldata():
    tablename = request.form.get('tablename')
    re_data = {
        'info': tablename
    }
    return jsonify(re_data)

需要注意的是
在前端的$.ajax函数中想要调用vue实例的data，不能采用this.para的方式，因为在ajax中this并不指向vue实例，需要在ajax前设置vm = this，然后调用vm.para

补充1

在同一个函数内调用的两次$.ajax是并行的，并不是顺序进行的，因此返回数据也不一定是按顺序的，如果其中在前端或后端有内在逻辑，不可直接写在一个函数中。
可以通过将一个ajax写在另一个的success内进行顺序控制
例：

$.ajax({
        success:function(data){ 
          $.ajax({
            success:function(data){  },
            error:function () { }
          });

补充2

前端向后传递数组、字典等结构时需要转化为字符串，可用JSON.stringify(row)函数进行转化
后端接收前端传递的json字符串后不可直接使用（因为此时是字符串类型），可用json.loads()函数将字符串还原