flask前端与后端之间传递的两种数据格式：json与FormData

json格式

双向！

前端 ==>后端：json格式

后端 ==>前端：json格式

html

<!-- html部分 -->
<form enctype='application/json' method="post">
    <input type="text" name="username" placeholder="请输入用户名"/></br>
    <input type="text" name="password" placeholder="请输入密码"/></br>
    <button type="submit">登录</button>
</form>

<!-- 用户列表，用于显示新增的用户 -->
<ol id="container"></ol>

<!-- javascript部分 -->
<script>
var container = document.getElementById('container');
// 辅助函数：将一个新添加的用户(user)，放入form的下方容器的尾部显示
var show_added_user = function (user) {
    var li = document.createElement("li");
    li.innerText = user["id"] + " " + user["username"] + ":" + user["password"];
    container.appendChild(li);
};

// 将formData数据转换为json数据，版本一
var convert_FormData_to_json = function (formData) {
    var objData = {};
    for (var entry of formData.entries()){objData[entry[0]] = entry[1];}
    return JSON.stringify(objData);
};

// 将formData数据转换为json数据，版本二（箭头语法）
var convert_FormData_to_json2 = function (formData) {
    var objData = {};
    formData.forEach((value, key) => objData[key] = value);
    return JSON.stringify(objData);
};

var formobj = document.querySelector('form');
//var formobj = document.getElementByTag('form');
formobj.addEventListener('submit', function(event){
    event.preventDefault();

    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/users/');

    xhr.setRequestHeader('Content-Type', 'application/json'); // （前端）声明json格式
    xhr.send(convert_FormData_to_json(new FormData(formobj)));// （前端）发送json数据
    xhr.addEventListener('loadend', function() {
        if(xhr.status == 201){ // 201，去看app.py！！
            var user = JSON.parse(xhr.responseText);          // （前端）处理接收的json数据
            show_added_user(user)
            //users.map(show_added_user); // 如果返回users list，则可用map！！
        }
    }, false);
}, false);
</script>

app.py

# app.py
# 查询
@app.route('/users', methods=['GET'])
def show_user(user_id):
    users = User.query.all()
    return jsonify(users)                                                           # （后端）发送json数据

# 查询一个
@app.route('/users/<int:user_id>', methods=['GET'])
def show_user(user_id):
    user = User.query.filter_by(id=user_id).first()
    return jsonify(user)                                                            # （后端）发送json数据

# 添加
@app.route('/users/', methods=['POST'])
def add_user():
    username, password = request.json['username'], request.json.get('password', "") # （后端）处理接收的json数据
    user = User(username, password) # 自动多了id
    db.session.add(user)
    db.session.commit()
    return jsonify(user), 201                                                       # （后端）发送json数据

FormData格式

单向！

前端 ==>后端：FormData格式

后端 ==>前端：json格式

html

<!-- html部分 -->
<form enctype='application/x-www-form-urlencoded' method="post"> <!-- 编码传送 -->
<!-- 或者：<form enctype='multipart/form-data' method="post"> --> <!-- 不编码传送，特别是当包含文件上传控件时，必须用这个！ -->
    <input type="text" name="username" placeholder="请输入用户名"/></br>
    <input type="text" name="password" placeholder="请输入密码"/></br>
    <button type="submit">登录</button>
</form>

<!-- 用户列表 -->
<ol id="container"></ol>

<!-- javascript部分 -->
<script>
var container = document.getElementById('container');
// 辅助函数：将一个新添加的用户(user)，放入form的下方容器的尾部显示
var show_added_user = function (user) {
    var li = document.createElement("li");
    li.innerText = user["id"] + " " + user["username"] + ":" + user["password"];
    container.appendChild(li);
};

var formobj = document.querySelector('form');
//var formobj = document.getElementByTag('form');

formobj.addEventListener('submit', function(event){
    event.preventDefault();

    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/users/');

    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // （前端）声明form格式 注意这里对应前面：application/x-www-form-urlencoded
    xhr.send(new FormData(formobj));                                           // （前端）发送form数据
    xhr.addEventListener('loadend', function() {
        if(xhr.status == 201){ // 201，去看app.py！！
            var user = JSON.parse(xhr.responseText);                           // （前端）处理接收的json数据
            show_added_user(user)
            //users.map(show_added_user); // 如果返回users list，则可用map！！
        }
    }, false);
}, false);
</script>

app.py

# app.py
# 查询
@app.route('/users', methods=['GET'])
def show_user(user_id):
    users = User.query.all()
    return jsonify(users)                                                           # （后端）发送json数据

# 查询一个
@app.route('/users/<int:user_id>', methods=['GET'])
def show_user(user_id):
    user = User.query.filter_by(id=user_id).first()
    return jsonify(user)                                                            # （后端）发送json数据

# 添加
@app.route('/users/', methods=['POST'])
def add_user():
    username, password = request.form['username'], request.form.get('password', "") # （后端）处理接收的form数据
    user = User(username, password) # 自动多了user_id
    db.session.add(user)
    db.session.commit()
    return jsonify(user), 201                                                       # （后端）发送json数据