前端 JS 數據如何存入數據庫？AJAX 交互全流程

核心認知

瀏覽器端 JavaScript 無法直接連接數據庫（安全沙箱限制）。必須通過 HTTP 請求 → 後端接口 → 後端代碼操作數據庫 間接實現。

標準流程

1. 前端收集數據：表單輸入、用戶行為、計算結果等組裝為 JSON 對象。
2. 發起 AJAX 請求（fetch / axios / $.ajax）：

   // 現代 fetch 寫法
   async function saveScore(val) {
       const res = await fetch('/api/save', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({ score: val })
       });
       const result = await res.json();
       if (result.ok) console.log('存儲成功');
   }

3. 後端接收並入庫（以 Node.js/Express + MySQL 為例）：

   app.post('/api/save', express.json(), async (req, res) => {
       const { score } = req.body;
       if (typeof score !== 'number') return res.json({ ok: false, msg: '參數錯誤' });
       try {
           await pool.execute('INSERT INTO scores(value, created_at) VALUES (?, NOW())', [score]);
           res.json({ ok: true });
       } catch (e) {
           res.status(500).json({ ok: false, msg: '服務器錯誤' });
       }
   });

4. 前端處理響應：成功提示用戶、刷新列表；失敗重試或報錯。

關鍵安全實踐

• 參數化查詢/預編譯：防 SQL 注入（上例 ? 佔位符）。
• 輸入驗證：前後端雙重校驗（類型、範圍、長度、格式）。
• 認證授權：接口需攜帶 Token/JWT，後端驗證用戶身份與權限。
• HTTPS：生產環境強制 TLS，防數據竄改/竊聽。
• 限流/防刷：同一 IP/用戶高頻寫入需限流（Redis 計數器）。

替代方案（特殊場景）

總結

JS 存數據庫 = AJAX 發 JSON → 後端驗證 → 參數化 SQL 入庫 → 返回結果。切記：永遠不要在前端拼接 SQL 字符串，也不要暴露數據庫連接信息。