前后端分离模式下前端与后端数据交互

下面举的例子就是使用jQuery Ajax和Python Flask进行前后端交互时，前端提交表单数据到后端，后端返回JSON数据给前端。

1. 前端GET提交表单数据：

# GET请求

var data = {
    "name": "test",
    "test": "test",
};
$.ajax({
    type: 'GET',
    url: /your/url/,
    data: data, # 最终会被转化为查询字符串跟在url后面： /your/url/?name=test&age=1
    dataType: 'json', 
    success: function(data) { # 这里的data就是json格式的数据
    },
    error: function(xhr, type) {
    }
});

请求里面的dataType指的是希望服务端能返回的数据格式，还可以是null, xml, script, json

后端接受GET请求：

name = request.args.get('name', ' ')

---

2. 前端POST提交表单信息：

data = $('#form1').serialize();
# 这是页面有表单的情况下，使用jQuery的方法直接将整个表单的信息储存到data里面

$.ajax({
    type: 'POST',
    url: /your/url/,
    data: data,
    dataType: 'json',
    success: function(data) {
    },
    error: function(xhr, type) {
    }
});

后端接受POST表单请求：

name = request.form.get('name', '')

---

3. 前端POST提交JSON数据：
   如果是JSON数据，就需要添加contentType参数，告诉后端传递过来的格式是JSON

var data = {
    “name”: "test",
    ...
}
$.ajax({
    type: 'POST',
    url: /your/url/,
    data: JSON.stringify(data), # 转化为字符串
    contentType: 'application/json; charset=UTF-8',
    dataType: 'json', 
    success: function(data) {
    },
    error: function(xhr, type) {
    }
});

这里前端需要将JSON格式data转换为字符串，并告知了后端格式，后端需要再将字符串转换为JSON格式。

后端接受POST JSON请求：

data = request.get_json()