前端开发避坑-form表单action和submit提交与ajax异步提交冲突引起的故障解决

// 假设你有一个表单元素，其ID为myForm
var form = document.getElementById('myForm');
 
// 为表单添加事件监听，阻止表单默认提交行为
form.addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单的默认提交行为
 
    // 获取表单的action属性和method属性
    var action = form.getAttribute('action');
    var method = form.getAttribute('method').toUpperCase(); // 获取并转换为大写
 
    // 创建一个新的XMLHttpRequest对象
    var xhr = new XMLHttpRequest();
 
    // 配置请求
    xhr.open(method, action);
 
    // 设置请求完成的处理函数
    xhr.onload = function() {
        if (this.status >= 200 && this.status < 300) {
            // 请求成功，处理返回的数据
            console.log('Form submitted!');
        } else {
            // 请求失败，处理错误
            console.error('Form submission error!');
        }
    };
 
    // 发送请求
    xhr.send(new FormData(form)); // 使用FormData来发送表单数据
});

这段代码展示了如何使用原生JavaScript来阻止表单的默认提交行为，并使用XMLHttpRequest对象异步提交表单数据。这样可以避免因表单的action属性和异步请求的提交行为冲突而导致的问题。