PHP + JavaScript 實現大量資料提交：短信群發系統完整架構解析

系統概覽

本文深度解析一個結合 PHP 後端與 JavaScript 前端的大量資料提交系統——短信群發管理平台。系統採用雙向選單選擇接收號碼、即時字數統計、表單驗證與批次資料庫寫入等核心功能，展示傳統 PHP + jQuery 架構處理大規模表單提交的完整實作模式。

前端架構：jQuery 驅動的互動體驗

雙向選單號碼管理

系統採用經典的「可用號碼」與「已選號碼」雙選單設計，透過 JavaScript 實現四種操作模式：

• 單項移動：moveOption1() / moveOption2() — 雙擊或點擊按鈕在兩個 <select multiple> 間移動選中項目
• 全量移動：moveAllOption1() / moveAllOption2() — 一鍵移動所有項目
• 即時同步隱藏欄位：每次操作後呼叫 getvalue() 將已選號碼以逗號分隔寫入 <input type="hidden" name="msgto">，確保表單提交時攜帶完整號碼清單

function getvalue(geto) {
    var allvalue = "";
    for (var i = 0; i < geto.options.length; i++) {
        allvalue += geto.options[i].value + ",";
    }
    return allvalue;
}

即時字數統計與限制

引入 maxlength.js 外掛，配合 textarea 的 data-maxsize="70" 屬性，即時顯示剩餘字數於 #status1 元素，強制限制短信內容在 70 字以內（符合標準短信長度規範）。

表單提交前驗證

function checkdata() {
    if (myform.msgto.value == '') {
        alert("接收方號碼不能全部為空！");
        myform.focus();
        return false;
    }
    if (myform.content.value == '') {
        alert("短消息內容不能為空！");
        myform.focus();
        return false;
    }
}

後端架構：PHP 批次處理邏輯

權限驗證與會話管理

session_start();
if ($_SESSION["login"] != "YES") {
    echo "<script>alert('您沒有登錄，無權訪問，請先登錄！'); location.href='index.php'</script>";
}

號碼解析與批次寫入

核心處理邏輯展示如何將逗號分隔的號碼字串拆解並逐筆寫入資料庫：

$content = $_POST["content"];
$msgto = $_POST["msgto"];

if ($content != '' && $msgto != '') {
    $addtime = date("Y-m-d H:i:s");
    
    // 號碼處理：去首尾逗號 → 爆炸成陣列
    $msg2 = trim($msgto, ',');
    $msg2 = explode(',', $msg2);
    
    if ($msg2) {
        foreach ($msg2 as $var) {
            $query = "INSERT INTO sendmessage (numbersend, timesend, contentsend, flagsend) 
                      VALUES ('$var', '$addtime', '$content', '0')";
            mysql_query($query);
        }
        echo "<script>alert('記錄成功，等待發送！'); location.href='send_box.php'</script>";
    } else {
        echo "<script>alert('號碼不對，請核對！'); history.back(-1)</script>";
    }
}

動態載入號碼簿資料

頁面載入時從 number 資料表讀取所有聯繫人，動態生成左側選單選項：

$query = "SELECT * FROM `number`";
$result = mysql_query($query);
if (mysql_num_rows($result) < 1) {
    echo "<option>號碼為空!</option>";
} else {
    $totalnum = mysql_num_rows($result);
    for ($i = 0; $i <= $totalnum; $i++) {
        $info = mysql_fetch_array($result);
        if ($info != "") {
            echo "<option value=\"{$info['num']}\"><font color=blue><b>{$info['name']}</b></font></option>";
        }
    }
}
mysql_close($member);

關鍵技術細節與現代化改造建議

1. 資料庫操作現代化（必要升級）

2. 前端架構升級路徑

• jQuery → Vue/React：雙向資料綁定自動同步選單狀態，消除手動 DOM 操作
• 表單提交 → AJAX/Fetch：避免頁面跳轉，提供載入狀態、進度條、錯誤即時回饋
• 字數統計 → 計算屬性：框架內建響應式計算，無需外掛依賴

3. 大量資料提交效能優化

// 現代化批次寫入範例 (PDO + 交易 + 預處理)
try {
    $pdo->beginTransaction();
    $stmt = $pdo->prepare("INSERT INTO sendmessage (numbersend, timesend, contentsend, flagsend) VALUES (?, ?, ?, 0)");
    
    foreach ($msg2 as $var) {
        $stmt->execute([$var, $addtime, $content]);
    }
    
    $pdo->commit();
    // 回傳 JSON 供前端 AJAX 處理
    echo json_encode(["success" => true, "message" => "記錄成功，等待發送！"]);
} catch (Exception $e) {
    $pdo->rollBack();
    echo json_encode(["success" => false, "message" => "寫入失敗：" . $e->getMessage()]);
}

4. 安全性強化清單

• CSRF 保護：表單加入 <input type="hidden" name="csrf_token" value="">
• XSS 防護：輸出變數時使用 htmlspecialchars()，特別是動態生成的 <option> 內容
• 輸入驗證：號碼格式正則驗證、內容長度服務端二次檢查
• 速率限制：防止濫發 API，加入 IP/用戶級別的提交頻率控制

系統架構圖解

┌─────────────┐     ┌─────────────┐     ┌─────────────┐
│  前端頁面   │────▶│  PHP 控制器  │────▶│  MySQL 資料庫 │
│ (HTML/JS)   │     │ (表單處理)   │     │ (sendmessage)│
└─────────────┘     └─────────────┘     └─────────────┘
       │                   │                    │
       ▼                   ▼                    ▼
┌─────────────┐     ┌─────────────┐     ┌─────────────┐
│ 雙選單互動  │     │ 批次 INSERT │     │ 發送隊列    │
│ 字數即時統計│     │ 交易保證    │     │ (後續處理)  │
└─────────────┘     └─────────────┘     └─────────────┘

總結

本系統展示了傳統 PHP + jQuery 架構處理大量表單資料的完整流程：前端提供直觀的號碼選擇與即時驗證體驗，後端實現批次資料庫寫入與基本權限控制。雖然核心邏輯清晰可行，但 mysql_* 函數棄用、SQL 注入風險、缺乏交易控制等問題在現代開發中不可接受。建議採用 PDO/MySQLi 預處理、前端框架現代化、AJAX 非同步提交、完善的安全防護體系進行全面重構，構建符合當前標準的企業級短信發送平台。