如何用JS实现表单POST提交数据并以GET完成跳转？

方案一：修改后端PHP代码（无需JS，最简单） #

表单用POST提交时，qtd参数会存入$_POST数组，直接修改processa.php的跳转逻辑即可，无需改动前端表单：

<?php
// 先执行保存用户信息的逻辑（比如插入数据库）
include('conexao.php');

// 验证qtd参数是否合法
if(isset($_POST['qtd']) && $_POST['qtd'] !== 'QTD'){
    // 对参数做URL编码，避免空格、特殊字符破坏URL结构
    $encodedQtd = urlencode($_POST['qtd']);
    // 跳转至拼接后的地址
    header("Location: https://mpago.la/" . $encodedQtd);
    exit; // 跳转后必须终止脚本，防止后续代码执行
} else {
    // 若未选择数量，跳转回表单页面
    header("Location: 你的表单页面地址.php");
    exit;
}
?>

关键注意事项：

• 确保header()调用前没有任何输出（包括空格、HTML标签），否则会触发报错。
• 对qtd值做urlencode()处理，适配选项中带空格、特殊符号的情况（比如3 - R$96）。

方案二：前端JS实现AJAX提交+跳转（适合前端控制跳转场景） #

通过JS阻止表单默认提交，用AJAX发送POST请求保存数据，成功后再跳转至目标地址：

步骤1：在表单页面添加JS代码 #

在HTML的</body>标签前插入以下脚本：

<script>
const form = document.querySelector('form[name="form"]');

form.addEventListener('submit', function(e) {
    // 阻止表单默认提交行为
    e.preventDefault();
    
    const qtdSelect = document.getElementById('qtd');
    const qtdValue = qtdSelect.value;
    
    // 验证是否选择了数量
    if(qtdValue === 'QTD'){
        alert('请选择购买数量');
        return;
    }
    
    // 打包所有表单数据
    const formData = new FormData(form);
    
    // 发送POST请求到处理页面
    fetch('processa.php', {
        method: 'POST',
        body: formData
    })
    .then(response => {
        if(response.ok){
            // 请求成功后跳转，对参数编码
            const encodedQtd = encodeURIComponent(qtdValue);
            window.location.href = `https://mpago.la/${encodedQtd}`;
        } else {
            alert('提交失败，请重试');
        }
    })
    .catch(error => {
        console.error('提交出错:', error);
        alert('网络异常，请检查后重试');
    });
});
</script>

步骤2：修改processa.php仅处理数据保存 #

此时processa.php只需负责将用户信息存入数据库，无需处理跳转：

<?php
include('conexao.php');

// 示例：将数据插入数据库（需根据你的表结构调整）
$sql = "INSERT INTO users (nome, sobrenome, data_nascimento, cpf, email, numero_celular, instagram, estado, cidade, bairro, cep, nome_rua, numero, complemento, qtd) 
        VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)";
$stmt = $conn->prepare($sql);
$stmt->bind_param("sssssssssssssss", 
    $_POST['nome'],
    $_POST['sobrenome'],
    $_POST['data_nascimento'],
    $_POST['cpf'],
    $_POST['email'],
    $_POST['numero_celular'],
    $_POST['instagram'],
    $_POST['estado'],
    $_POST['cidade'],
    $_POST['bairro'],
    $_POST['cep'],
    $_POST['nome_rua'],
    $_POST['numero'],
    $_POST['complemento'],
    $_POST['qtd']
);

if($stmt->execute()){
    echo "success";
} else {
    http_response_code(500);
    echo "error";
}

$stmt->close();
$conn->close();
?>

关键注意事项：

• 确保processa.php没有输出多余内容（比如空格、调试信息），否则AJAX会解析错误。
• 使用encodeURIComponent()对qtd值编码，保障URL格式正确。

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