使用Ajax结合preventDefault()实现表单无刷新验证提交时，表单无法提交且无错误返回的问题排查

嘿，我仔细看了你的代码和问题描述，咱们一步步拆解问题所在，帮你搞定这个无刷新表单验证提交的需求：

首先，你的代码里存在几个核心问题： #

1. Ajax请求时机错误
   你在页面加载时就直接发送了xmlhttp.send()，这意味着用户还没点击提交按钮，请求就已经发出去了。后续在表单submit事件里监听的onreadystatechange，对应的是这个提前发送的空请求，而不是用户提交时带表单数据的验证请求——PHP拿不到用户输入，自然没法返回正确的错误信息，你也就看不到任何提示。

2. 表单提交的循环阻止
   当验证通过后，你调用document.getElementById("signup-form").submit()，但这个方法会再次触发表单的submit事件，而你在事件处理函数里又写了e.preventDefault()，相当于刚要提交就被自己阻止了，陷入了循环，表单永远发不出去。

3. 没有传递表单数据
   你的Ajax请求是POST方式，但没有把表单里的用户输入数据发送给PHP，PHP那边没有数据做验证，返回的错误信息自然都是空的，验证逻辑等于没起作用。

修正后的代码方案（原生JS + jQuery混合写法，保持你的原有习惯） #

$('form').on('submit', function (e) {
    e.preventDefault(); // 阻止默认提交
    const form = this;
    const formData = new FormData(form); // 序列化表单数据

    // 这里重新创建Ajax请求，确保每次提交都是最新的
    let xmlhttp;
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.open("POST", "sign_up(1).php", true);
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            try {
                const data = JSON.parse(xmlhttp.responseText);
                // 先清空之前的错误提示（建议你在页面加对应元素显示错误）
                // 比如 $('.error').text('');

                // 检查是否有错误
                const hasError = data.error_msg_1 !== "" || data.error_msg_2 !== "" || data.error_msg_3 !== "" || data.error_msg_4 !== "";
                
                if (hasError) {
                    $('input[type="submit"]').prop('disabled', true);
                    // 这里要把错误信息显示给用户，比如：
                    // if(data.error_msg_1) $('#error1').text(data.error_msg_1);
                } else {
                    // 验证通过，用Ajax完成无刷新提交（不要调用form.submit()）
                    const submitXmlhttp = new XMLHttpRequest();
                    submitXmlhttp.open("POST", "sign_up(1).php", true);
                    submitXmlhttp.send(formData);
                    submitXmlhttp.onreadystatechange = function() {
                        if (submitXmlhttp.readyState == 4 && submitXmlhttp.status == 200) {
                            // 提交成功后的处理，比如提示用户、跳转页面等
                            alert('注册成功！');
                        }
                    }
                }
            } catch (err) {
                // 处理JSON解析错误，避免页面崩溃
                console.error('返回数据格式错误:', err);
                alert('服务器返回异常，请稍后重试');
            }
        }
    };
    xmlhttp.send(formData); // 发送带表单数据的验证请求
});

关键修改点说明： #

• 把Ajax请求移到submit事件内部：确保每次用户点击提交，都会发送携带当前表单数据的验证请求，而不是页面加载时的空请求。
• 使用FormData传递数据：让PHP能正常接收表单输入，完成验证逻辑。
• 避免循环提交：验证通过后，用Ajax直接提交数据（实现无刷新），不再调用会触发submit事件的原生form.submit()。
• 增加错误处理：加入JSON解析的异常捕获，避免因为服务器返回非JSON数据导致页面卡死，同时要把错误信息展示给用户（你需要在HTML里对应位置加错误显示元素）。

额外建议： #

如果项目里已经引入了jQuery，其实可以用更简洁的$.post来替代原生XMLHttpRequest，代码会更易读：

$('form').on('submit', function (e) {
    e.preventDefault();
    const form = this;
    const formData = $(form).serialize();

    $.post("sign_up(1).php", formData, function(data) {
        const hasError = data.error_msg_1 || data.error_msg_2 || data.error_msg_3 || data.error_msg_4;
        if (hasError) {
            $('input[type="submit"]').prop('disabled', true);
            // 显示错误信息，比如：
            // data.error_msg_1 && $('#error1').text(data.error_msg_1);
        } else {
            // 无刷新提交表单
            $.post("sign_up(1).php", formData, function() {
                alert('注册成功');
                // 可以在这里重置表单或者跳转到首页
            });
        }
    }, 'json').fail(function() {
        alert('服务器请求失败，请稍后重试');
    });
});

这样代码更简洁，也不用手动处理XMLHttpRequest的状态和错误。

备注：内容来源于stack exchange，提问作者Dawn