原生JS表单Ajax提交后跳转JSON页面，如何修正以显示状态消息？

问题场景 #

需求为：表单提交后通过移除元素ID（该ID对应display:none样式）展示成功/错误消息。但当前使用原生JS提交后，未显示状态元素，反而打开新页面展示JSON字符串，示例返回内容：

{"success":true,"given_params":{"name":"","phone":"","email":"","message":""}}

现有表单代码：

<form id="leadcontact" action="xxxxxxxxxxx" method="POST" enctype="multipart/form-data">
    <div class="form-field-container">
        <label for="name">name</label>
        <input type="text" name="name">
    </div>
    <div class="form-field-container">
        <label for="tel">phone</label>
        <input type="text" name="phone">
    </div>
    <div class="form-field-container">
        <label for="email">email</label>
        <input type="email" name="email">
    </div>
    <div class="form-field-container">
        <label for="message">message</label>
        <textarea name="message"></textarea>
    </div>
    <p id="notsent" class="message-status error">Error! Not sent</p>
    <p id="sent" class="message-status success">Message sent</p>
    <button type="submit">Send</button>                
</form>

现有提交脚本：

<script type="text/javascript">
    var form = document.getElementById("leadcontact");
    var sent = document.getElementById('sent');
    var notsent = document.getElementById('notsent');
    form.onsubmit = function(event) {
    event.preventDefault();
    var formData = new FormData(form);
    var xhr = new XMLHttpRequest();
    xhr.open("POST", form.action, true);
    xhr.send(formData);
    xhr.onload = function(e) {
    if (xhr.status === 200) {
    sent.removeAttribute('id');
    form.reset();
    } else {
    notsent.removeAttribute('id');
    }
    };
    };
</script>

问题原因 #

1. 事件绑定时机问题：原脚本未确保DOM加载完成后再绑定事件，可能导致form元素未被正确获取，event.preventDefault()失效。
2. 状态判断逻辑缺陷：仅通过HTTP状态码200判断业务成功，未结合后端返回的success标识，存在请求成功但业务失败的误判。
3. 后端响应类型问题：若后端未设置Content-Type: application/json响应头，浏览器会将JSON内容当作普通页面渲染，触发跳转。

修正后的脚本 #

<script type="text/javascript">
    // 确保DOM完全加载后绑定事件
    document.addEventListener('DOMContentLoaded', function() {
        var form = document.getElementById("leadcontact");
        var sent = document.getElementById('sent');
        var notsent = document.getElementById('notsent');

        form.addEventListener('submit', function(event) {
            // 强制阻止默认提交与事件冒泡
            event.preventDefault();
            event.stopPropagation();

            // 重置状态消息（重新添加ID隐藏）
            sent.setAttribute('id', 'sent');
            notsent.setAttribute('id', 'notsent');

            var formData = new FormData(form);
            var xhr = new XMLHttpRequest();
            
            xhr.open("POST", form.action, true);
            // 声明接受JSON类型响应
            xhr.setRequestHeader('Accept', 'application/json');
            
            xhr.onload = function(e) {
                try {
                    // 解析后端返回的JSON数据
                    var response = JSON.parse(xhr.responseText);
                    // 结合HTTP状态与业务标识判断成功
                    if (xhr.status === 200 && response.success) {
                        sent.removeAttribute('id');
                        form.reset();
                    } else {
                        notsent.removeAttribute('id');
                    }
                } catch (err) {
                    // JSON解析失败时显示错误
                    notsent.removeAttribute('id');
                }
            };

            // 网络请求失败时触发错误提示
            xhr.onerror = function() {
                notsent.removeAttribute('id');
            };

            xhr.send(formData);
        });
    });
</script>

额外注意事项 #

• 后端配置：确保后端返回JSON时设置Content-Type: application/json响应头，避免浏览器将响应内容当作页面跳转。
• 样式保障：确认CSS中存在#sent, #notsent { display: none; }规则，确保移除ID后状态消息能正常显示。
• 状态重置：每次提交前重新添加ID隐藏状态消息，避免多次提交后状态混乱。

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