前端与后端的数据交互

前端与后端的数据交互，最常用的就是GET、POST，比较常用的用法是：提交表单数据到后端，后端返回json。

• 前端的数据发送与接收

  1. 提交表单数据
  2. 提交JSON数据

• 后端的数据接收与响应

  1. 接收GET请求数据
  2. 接收POST请求数据
  3. 响应请求

前端的数据发送与接收

1. 提交表单数据

    # GET请求
   
    var data = {
        "name": "test",
        "age": 1
    };
    $.ajax({
        type: 'GET',
        url: /your/url/,
        data: data, # 最终会被转化为查询字符串跟在url后面： /your/url/?          name=test&age=1
        dataType: 'json', # 注意：这里是指希望服务端返回json格式的数据
        success: function(data) { # 这里的data就是json格式的数据
        },
        error: function(xhr, type) {
        }
    });
   
   
    #POST请求
   
    var data = {}
    # 如果页面并没有表单，只是input框，请求也只是发送这些值，那么可以  直接获取放到data中
    data['name'] = $('#name').val()
   
    # 如果页面有表单，那么可以利用jquery的serialize()方法获取表单的全部数据
    data = $('#form1').serialize();
   
    $.ajax({
        type: 'POST',
        url: /your/url/,
        data: data,
        dataType: 'json', # 注意：这里是指希望服务端返回json格式的数据
        success: function(data) { # 这里的data就是json格式的数据
        },
        error: function(xhr, type) {
        }
    });
   

注意：
A）参数dataType：期望的服务器响应的数据类型，可以是null, xml, script, json。
B）请求头中的Content-Tpye默认是Content-Type:application/x-www-form-urlencoded，所以参数会被编码为name=xx&age=1 这种格式，提交到后端，后端会当作表单数据处理。

2. 提交JSON数据

如果要给后端传递json数据，就需要增加content-type参数，告诉后端，传递过来的数据格式，并且需要将data转为字符串进行传递。实际上，服务端接收到后，发现是json格式，做的操作就是将字符串转为json对象。
另外，不转为字符串，即使加了content-type的参数，也默认会转成 name=xx&age=1，使后端无法获取正确的json

    # POST一个json数据

    var data = {
        “name”: "test",
        "age", 1
    }
    $.ajax({
         type: 'POST',
        url: /your/url/,
        data: JSON.stringify(data), # 转化为字符串
        contentType: 'application/json; charset=UTF-8',
        dataType: 'json', # 注意：这里是指希望服务端返回json格式的数据
        success: function(data) { # 这里的data就是json格式的数据
        },
        error: function(xhr, type) {
        }
    });

后端的数据接收与返回

1. 接收GET请求数据

    name = request.args.get('name', '')
    age = int(request.args.get('age', '0'))
   

2. 接收POST请求数据

接收表单数据

    name = request.form.get('name', '')
    age = int(request.form.get('age', '0'))

接收Json数据

    data = request.get_json()

get_json的源码

另外，如果前端提交的数据格式不能被识别，可以用request.get_data()接收数据。
微信公众号后台接收微信推送的xml格式的消息体，就可以用request.get_data()来接收。

3. 响应请求

Flask可以非常方便的返回json数据

    from Flask import jsonify
    return jsonify({'ok': True})

jsonify源码

看一下源码就可以知道，jsonify就是帮我们做了点添加mimetype这样的杂事，所以如果不嫌麻烦和难看，你也可以这样写

    # 太丑了，还是别这么干了
    return Response(data=json.dumps({'ok': True}), mimetype='application/json')

放两张截图来直观看一下请求

post表单数据到服务端

Post JSON数据到服务端