求助：表单提交后无法阻止页面刷新，需实现无刷新提交并保留表单

看起来你的无刷新提交失效的问题主要出在事件处理顺序和原生JS与jQuery混合绑定的小冲突上，咱们一步步来解决：

问题核心分析 #

1. e.preventDefault()位置错误：你把阻止默认行为的代码放在了fetch请求之后，但fetch是异步操作，浏览器可能已经触发了表单的默认提交行为，页面自然就刷新了。
2. 原生事件监听与jQuery的兼容性：虽然在$(document).ready()里，但用原生addEventListener绑定，偶尔会和jQuery的事件队列产生冲突，直接用jQuery的submit()方法会更稳妥。

修正后的JavaScript代码 #

<script type="text/javascript">
$(document).ready(function(){
    $(".hide-section:not(:first)").hide();
    $('#mudar_produto').change(function(){
        $('.hide-section').hide();
        $($(this).val()).show();
    });
    $('#first_dd').change(function(){
        var id = $('#first_dd option:selected').val();
        $.each($('#second_dd option'),function(){
            if($(this).attr('data-id')==id){
                $(this).attr('selected',true);
            }
        });
    });

    // 改用jQuery的submit事件绑定，优先阻止默认行为
    $('#primeiro').submit(async function(e) {
        // 第一步：立即阻止表单默认提交逻辑
        e.preventDefault();
        
        const form = this;
        try {
            const res = await fetch(form.action, {
                method: form.method,
                body: new FormData(form)
            });
            // 处理后端响应，给用户反馈
            if(res.ok) {
                alert('产品新增成功！');
                // 可选：提交成功后清空表单
                form.reset();
            } else {
                alert('提交失败，请重试');
            }
        } catch(error) {
            console.error('提交出错:', error);
            alert('提交出错，请检查控制台日志');
        }
    });

    // 如果你需要第二个入库表单也支持无刷新提交，添加这段代码
    $('#segundo').submit(async function(e) {
        e.preventDefault();
        const form = this;
        try {
            const res = await fetch(form.action, {
                method: form.method,
                body: new FormData(form)
            });
            if(res.ok) {
                alert('产品入库成功！');
                form.reset();
            } else {
                alert('入库失败，请重试');
            }
        } catch(error) {
            console.error('提交出错:', error);
            alert('提交出错，请检查控制台日志');
        }
    });
});
</script>

额外优化建议 #

1. 后端响应标准化：建议你的PHP后端返回JSON格式的响应，方便前端做更精准的状态判断：

<?php
header('Content-Type: application/json');

if(isset($_POST['submit'])){
    $name = $_POST['DescricaoProd'];
    $unid = $_POST['DescricaoUnid'];
    // 执行数据库插入逻辑
    $insertSuccess = true; // 根据实际插入结果修改
    
    echo json_encode([
        'success' => $insertSuccess,
        'message' => $insertSuccess ? '产品新增成功' : '新增失败，请检查数据'
    ]);
    exit;
}

if(isset($_POST['submit1'])){
    // 执行入库逻辑
    $insertSuccess = true;
    echo json_encode([
        'success' => $insertSuccess,
        'message' => $insertSuccess ? '产品入库成功' : '入库失败，请检查数据'
    ]);
    exit;
}
?>

前端可以解析JSON响应，替换原来的alert提示：

// 在fetch成功后添加
const data = await res.json();
alert(data.message);

2. 表单状态保留：如果需要保留用户输入的部分内容，可以去掉form.reset()，或者根据需求选择性重置字段。

这样修改后，就能确保表单提交时不会刷新页面，完美实现无刷新提交并保留表单状态啦！

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