HTML 表單無刷新提交與數據回填綜合實例

實例背景

本文同樣展示兩種 iframe 無刷新提交方案，並著重於提交後如何根據後端返回數據更新頁面輸入框（如驗證碼、用戶資料回填）。

方案一：傳統隱藏 iframe + 腳本注入

代碼結構與上一文一致，後端直接輸出 <script>alert(...);</script> 進行提示，適合簡單通知場景。

方案二：iframe onload 解析 JSON 實現數據回填

前端 iframeLoad 函數解析 JSON，根據 status 執行不同邏輯：

function iframeLoad(iframe) {
    var doc = iframe.contentWindow.document;
    var html = doc.body.innerHTML;
    if(html != '') {
        var obj = eval("(" + html + ")");
        if(obj.status < 1) { alert(obj.msg); }
        else {
            alert(obj.msg);
            // 此處可添加表單欄位回填邏輯
            // document.getElementById('uname').value = obj.data.username;
            window.location.href = "https://www.baidu.com";
        }
    }
}

後端 PHP 同樣返回 json_encode($msg)，可擴展 data 欄位攜帶需回填的數據。

安全與現代化建議

• 避免使用 eval()，改用 JSON.parse()。
• 設置 Content-Type: application/json 確保瀏覽器正確解析。
• 新專案優先採用 fetch API + FormData，完全移除 iframe 依賴。