// 一個最簡單的GET請求示例
fetch('/api/data')
  .then(response => response.json()) // 打開包裹，解析JSON數(shù)據(jù)
  .then(data => console.log(data))   // 處理真實數(shù)據(jù)
  .catch(error => console.error('出錯啦：', error)); // 處理錯誤

pip install flask flask-cors

from flask import Flask, request, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)  # 允許前端跨域請求，開發(fā)時非常方便

# 我們將在后續(xù)場景中逐步填充這個app的路由
if __name__ == '__main__':
    app.run(debug=True)

document.getElementById('loginForm').addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表單默認提交行為

    const formData = new FormData(this);
    // 或者將數(shù)據(jù)轉(zhuǎn)換為JSON: JSON.stringify(Object.fromEntries(formData))

    fetch('/api/login', {
        method: 'POST',
        body: formData, // 發(fā)送FormData對象
        // headers: { 'Content-Type': 'application/json' }, // 如果發(fā)送JSON需設(shè)置此header
    })
    .then(response => response.json()) // 解析后端返回的JSON
    .then(result => {
        if (result.success) {
            // 登錄成功，使用前端路由跳轉(zhuǎn)，而非后端重定向
            window.location.href = result.redirect_url || '/dashboard';
        } else {
            // 登錄失敗，動態(tài)更新頁面上的錯誤提示元素
            document.getElementById('error-msg').textContent = result.message;
        }
    })
    .catch(error => console.error('Error:', error));
});

@app.route('/api/login', methods=['POST'])
def login():
    username = request.form.get('username')
    password = request.form.get('password')

    # 這里應(yīng)是你的驗證邏輯，例如查詢數(shù)據(jù)庫
    if username == 'admin' and password == 'secret':
        # 返回成功狀態(tài)和前端跳轉(zhuǎn)地址
        return jsonify({'success': True, 'redirect_url': '/dashboard'})
    else:
        # 返回失敗狀態(tài)和錯誤信息
        return jsonify({'success': False, 'message': '用戶名或密碼錯誤'}), 401

// 假設(shè)有一個保存按鈕，用于提交新增或修改的數(shù)據(jù)
saveButton.addEventListener('click', () => {
    const itemData = { title: '新項目', status: 'active' };

    fetch('/api/items', {
        method: 'POST', // 新增用POST，修改可能是PUT或PATCH
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(itemData)
    })
    .then(response => response.json())
    .then(newItem => {
        // 關(guān)鍵步驟：請求成功后，動態(tài)更新前端列表
        const itemList = document.getElementById('itemList');
        const newItemElement = document.createElement('li');
        newItemElement.id = `item-${newItem.id}`;
        newItemElement.innerHTML = `${newItem.title} ${newItem.status}`;
        itemList.appendChild(newItemElement);

        // 或者，如果是修改操作，可以找到對應(yīng)的DOM元素更新其內(nèi)容
        // const oldItemElement = document.getElementById(`item-${newItem.id}`);
        // oldItemElement.innerHTML = ...;

        alert('操作成功！'); // 或更優(yōu)雅的提示
    });
});

fetch('/api/export')
  .then(response => response.text())
  .then(textData => {
    console.log(textData);
    // 處理文本數(shù)據(jù)...
  });

fetch('/api/some-data')
  .then(response => {
    if (!response.ok) { // 檢查HTTP狀態(tài)碼是否在200-299之間
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json(); // 狀態(tài)正常才解析JSON
  })
  .then(data => /* 處理數(shù)據(jù) */)
  .catch(error => /* 處理網(wǎng)絡(luò)錯誤或狀態(tài)碼錯誤 */);

# app.py (Flask后端)
from flask import Flask, request, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)
items = [] # 用一個簡易列表模擬數(shù)據(jù)庫

@app.route('/api/login', methods=['POST'])
def login():
    data = request.get_json()
    if data.get('user') == 'demo':
        return jsonify({'success': True, 'token': 'fake-jwt-token'})
    return jsonify({'success': False}), 401

@app.route('/api/items', methods=['GET', 'POST'])
def handle_items():
    if request.method == 'GET':
        return jsonify(items)
    else: # POST
        new_item = request.get_json()
        new_item['id'] = len(items) + 1
        items.append(new_item)
        return jsonify(new_item), 201

if __name__ == '__main__':
    app.run(debug=True)

<!-- index.html (部分前端) -->
<script>
// 登錄
fetch('/api/login', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({user: 'demo', pass: 'demo'})
}).then(r => r.json()).then(console.log);

// 新增項目并更新列表
fetch('/api/items', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({name: 'New Task'})
})
.then(r => r.json())
.then(newItem => {
    const list = document.getElementById('list');
    list.innerHTML += `<li>${newItem.id}: ${newItem.name}</li>`;
});
</script>