如何通过JavaScript事件实现表单提交替代默认action属性，及解决前置AJAX请求被忽略的问题

首先，咱们一步步来解决你的问题，先搞定当前AJAX请求被忽略、表单直接提交的紧急问题，再回头说原生提交效果的实现：

问题根源分析 #

你遇到的异常主要是由几个关键问题导致的：

1. 未阻止表单默认提交行为：AJAX是异步执行的，你没有先调用e.preventDefault()，所以表单在AJAX请求还没完成时就已经按照原生逻辑提交跳转了，自然看不到提示框。
2. 语法错误：你的代码里success回调的else位置不正确，且AJAX参数最后多了一个多余的}，这些会导致JS报错，代码直接终止执行。
3. 响应判断逻辑问题：如果PHP返回的是字符串"true"而非布尔值true，用response == true判断会出现不符合预期的结果（字符串"true"在JS中是真值，但如果返回的是"1"或其他标识，判断逻辑就会失效）。

修正后的代码示例 #

下面是调整后的完整代码，同时实现AJAX验证和原生表单提交效果：

// 获取表单元素
const form = document.getElementById('form1');

// 监听表单的submit事件（比监听按钮click更可靠，覆盖回车提交等场景）
form.addEventListener('submit', function(e) {
    // 第一步：立即阻止表单默认提交行为，这是核心！
    e.preventDefault();

    // 替换成你实际的输入框ID
    const inputElement = document.getElementById('your-input-id');

    $.ajax({
        type: 'POST',
        url: 'form_submission.php',
        data: {'check_input': inputElement.value},
        dataType: 'json', // 建议设置为JSON，方便解析响应
        success: function(response) {
            // 假设PHP返回格式为 {"valid": true} 或 {"valid": false}
            if (response.valid) {
                alert("Thank you for your inquiry!");
                // 验证通过：手动调用表单submit方法，完全复刻原生action的提交效果
                form.submit();
            } else {
                alert("Your input entered was incorrect.");
                // 验证不通过：不提交表单，停留在当前页面
            }
        },
        error: function() {
            // 处理AJAX请求失败的情况（比如服务器错误）
            alert("An error occurred, please try again later.");
        }
    });
});

关于「实现原生action提交效果」的补充说明 #

其实你不需要删除表单的action属性——只要保留它，在自定义操作完成后调用form.submit()，就会完全按照表单原生的action、method、enctype等属性发起请求，和直接点击提交按钮的效果一模一样。

如果之前已经删除了action属性，也可以手动设置后再提交：

// 手动设置目标URL
form.action = "https://www.external_url.com";
// 执行提交
form.submit();

额外注意事项 #

• 优先监听表单的submit事件而非按钮的click事件，因为表单还可以通过回车键等方式触发提交，这样能覆盖所有场景。
• 确保PHP端返回的响应格式正确（比如JSON），避免字符串和布尔值的判断混淆。
• 不要忘记处理AJAX请求失败的情况，给用户明确的反馈。

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