如何用单个按钮触发HTML表单逐个提交PHP数组中的所有用户名且不使用Ajax

核心逻辑：通过隐藏的命名iframe承接表单提交结果，避免当前页面跳转，监听iframe加载状态判断单条数据提交完成，再自动提交下一条数据，全程不使用Ajax。

1. 新增隐藏iframe #

放在页面任意位置即可，用于承接表单提交的响应，用户无感知：

<iframe name="_example" style="display:none"></iframe>

2. 修改原有PHP、按钮、表单代码 #

修改后PHP查询代码 #

新增数组初始化、JS可用的数组转换逻辑，避免空查询报错：

<?php
$stmt = $mysqli->prepare("SELECT username FROM example WHERE examplefield = 1");
$stmt->execute();
$result = $stmt->get_result();
$arrayusername = []; // 提前初始化数组，避免无数据时报错
while ($rowid = $result->fetch_assoc()) {
    $arrayusername[] = $rowid['username'];
} 
// 将PHP数组转换为JS可直接读取的JSON格式
$jsUsernameArr = json_encode($arrayusername);
?>

修改后按钮和表单代码 #

删除表单input的硬编码值，添加ID方便JS获取元素：

<!-- 按钮直接传入转换好的用户名数组 -->
<input type="button" value="Post all names one by one" 
onClick="sendallvalues(<?= $jsUsernameArr ?>)" class="example_c" />

<!-- 隐藏表单，input值由JS动态赋值 -->
<form method="post" target="_example" action="https://www.example.nl" id="usernameForm">
    <input type="hidden" value="" name="postvalue" id="postValueInput">
</form>

3. 完整sendallvalues函数代码 #

复制直接替换原有JS框架即可：

<script>
function sendallvalues(usernameArr) {
    // 空数组直接终止执行
    if(!usernameArr || usernameArr.length === 0) {
        alert('无需要提交的用户名');
        return;
    }
    // 获取页面元素
    const form = document.getElementById('usernameForm');
    const input = document.getElementById('postValueInput');
    const iframe = document.querySelector('iframe[name="_example"]');
    // 提交计数索引
    let currentIndex = 0;

    // 监听iframe加载完成事件，代表上一条提交完成，自动提交下一条
    iframe.onload = function() {
        currentIndex++;
        // 全部提交完成则终止
        if(currentIndex >= usernameArr.length) {
            alert('所有用户名提交完成');
            return;
        }
        // 赋值下一个用户名并提交
        input.value = usernameArr[currentIndex];
        form.submit();
    }

    // 提交第一个用户名
    input.value = usernameArr[currentIndex];
    form.submit();
}
</script>

注：即使表单提交地址和当前页面跨域，iframe的加载事件仍可正常触发，不影响提交计数逻辑

内容的提问来源于stack exchange，提问作者Martin15789