JavaScript 呼叫後端 PHP 實現無刷新數據交互的實戰代碼解析

前言

本文分享一種利用 JavaScript 呼叫後端 PHP 進行數據處理的早期實踐方案。雖然該方法屬於較早期的技術手段（現代開發多採用 AJAX/Fetch API），但其核心思路——通過動態修改 <script> 標籤的 src 屬性實現跨頁面數據傳遞——對於理解 Web 交互演進歷程、以及維護舊系統仍有參考價值。代碼經論壇資料整理消化後重寫，旨在幫助初學者掌握基本原理。

核心機制說明

由於時間限制，提交部分採用傳統表單 POST 方式。若需實現真正無刷新體驗，可在頁面載入過程中注入相應腳本（但受限於該機制，似乎僅支援 GET 請求）。聞 XML 可實現真正無刷新交互，若有相關資料歡迎分享交流。

感謝 QQ 群友「藍劍雪狐」與「shelly水」在 JavaScript 方面的指導。也期盼更多新手分享功能代碼，共同學習進步。

演示地址：https://lfox0002.dns0755.net/text_input.php（請勿進行惡意測試，僅供學習參考）。

input.php —— 前端輸入與交互邏輯

頁面結構與樣式

頁面包含一個表單，顯示兩列可編輯的數據欄位（名稱、類型、日期），以及數量輸入框與提交按鈕。關鍵在於 <script id="LoadDataSrc"></script> 這個空腳本標籤，它是實現動態數據載入的核心載體。

關鍵 JavaScript 函數解析

var objInput = null;
var objTd = null;
var num = null;

// 雙擊單元格啟用編輯模式
function AutoEdit(obj, id) {
    if (objInput == null) {
        objTd = obj;
        // 動態插入輸入框，失焦時回填數據並觸發載入
        obj.innerHTML = '<input size="10" maxlength="10" type="text" value="' 
            + obj.innerText + '" id="objInput" '
            + 'onblur="objTd.innerText=this.value;LoadData(objTd.innerText,num);objInput=null;" '
            + 'style="overflow:visible;border:none;background-color:#EFEFEF">';
        objInput = document.getElementById("objInput");
        objInput.focus();
    }
}

// 動態修改 script src 向後端請求數據
function LoadData(LoadIndex, LoadObj) {
    var LoadFileName = "load.php?action=" + LoadIndex + "&num=" + LoadObj;
    document.getElementById("LoadDataSrc").src = LoadFileName;
}

// 表單提交前組裝隱藏字段
function OutPutData(obj) {
    // 驗證必填字段
    if (form1.num1.value.length < 1) { alert("請輸入數量1"); return false; }
    if (form1.num2.value.length < 1) { alert("請輸入數量2"); return false; }
    if (document.getElementById("name1").innerHTML.length < 1) { alert("name1空值"); return false; }
    if (document.getElementById("name2").innerHTML.length < 1) { alert("name2空值"); return false; }

    // 動態生成隱藏輸入框攜帶數據
    obj.innerHTML = '<input type="hidden" name="name1" value="' + document.getElementById("name1").innerHTML + '">';
    obj.innerHTML += '<input type="hidden" name="name2" value="' + document.getElementById("name2").innerHTML + '">';
    obj.innerHTML += '<input type="hidden" name="type1" value="' + document.getElementById("type1").innerHTML + '">';
    obj.innerHTML += '<input type="hidden" name="type2" value="' + document.getElementById("type2").innerHTML + '">';
    obj.innerHTML += '<input type="hidden" name="date1" value="' + document.getElementById("date1").innerHTML + '">';
    obj.innerHTML += '<input type="hidden" name="date2" value="' + document.getElementById("date2").innerHTML + '">';
    obj.innerHTML += form1.submit();
}

load.php —— 後端數據處理與響應

核心邏輯流程

<?php
header("Cache-Control: no-store, no-cache, must-revalidate");
include("obj/financial_obj_free.inc"); // 資料庫連線配置

$str = $_GET["action"];
$num = $_GET["num"];

if ($str == "OutPutData") {
    OutPutData();
} else {
    linkdata("financial", 1);
    $sql = "select * from table where id='$str'";
    if ($query = mysql_query($sql)) {
        $temdata = mysql_fetch_row($query);
        // 防止空值導致 JS 報錯
        $temdata[2] = strlen($temdata[2]) < 1 || $temdata[2] == "" ? "空" : htmlspecialchars($temdata[2]);
        $temdata[3] = strlen($temdata[3]) < 1 || $temdata[3] == "" ? "空" : htmlspecialchars($temdata[3]);
        $temdata[5] = strlen($temdata[5]) < 1 || $temdata[5] == "" ? "空" : htmlspecialchars($temdata[5]);
    } else {
        $temdata[2] = $temdata[3] = $temdata[5] = "查詢失敗";
    }

    // 根據列號映射目標 DOM 元素 ID
    switch ($num) {
        case 1: $diva="name1"; $divb="type1"; $divc="date1"; break;
        case 2: $diva="name2"; $divb="type2"; $divc="date2"; break;
        default: $diva="name1"; $divb="type1"; $divc="date1"; break;
    }

    // 輸出 JavaScript 代碼，直接操作前端 DOM
    echo "document.getElementById('".$diva."').innerHTML='".$temdata[2]."';";
    echo "document.getElementById('".$divb."').innerHTML='".$temdata[3]."';";
    echo "document.getElementById('".$divc."').innerHTML='".$temdata[5]."';";
}

function OutPutData() {
    // 實際專案中此處應執行 SQL 寫入操作
    echo "輸出的數據如下，改成 SQL 語句然後就可以保存下來<br>";
    echo "編號1=".$_POST["name1"]."<br>";
    echo "編號2=".$_POST["name2"]."<br>";
    echo "名稱1=".$_POST["type1"]."<br>";
    echo "名稱2=".$_POST["type2"]."<br>";
    echo "日期1=".$_POST["date1"]."<br>";
    echo "日期2=".$_POST["date2"]."<br>";
    echo "數量1=".$_POST["num1"]."<br>";
    echo "數量2=".$_POST["num2"]."<br>";
    echo "<a href=\"text_input.php\">返回</a>";
}
?>

技術要點總結與現代視角對比

安全性警示（重要）

• SQL 注入風險：代碼直接將 `$_GET["action"]` 拼接進 SQL 語句，極度危險。生產環境必須使用預處理語句（PDO/MySQLi）。
• XSS 風險：後端直接輸出 JavaScript 代碼操作 `innerHTML`，且未對數據進行充分編碼。現代開發應採用 JSON 傳輸，前端通過 `textContent` 安全賦值。
• 過時 API：`mysql_*` 函數已在 PHP 7.0 中移除，請遷移至 PDO 或 MySQLi。
• 缺乏 CSRF 保護：表單提交無 Token 驗證。

結語

這個方案展示了 Web 早期開發者在無成熟 AJAX 技術下的創造性嘗試。雖然技術棧已過時，但「前端事件觸發 → 動態請求後端 → 後端返回可執行腳本更新頁面」的基本協作模式，在今天的單頁應用（SPA）架構中依然以更現代的形式延續著。建議初學者理解其歷史意義後，轉向學習現代前後端分離開發模式。