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數據