使用onclick提交表单时preventDefault失效且Ajax调用失败求助

看起来你遇到的问题主要有两个核心点：一是preventDefault()没拦住表单的默认提交行为，二是Ajax请求没正常执行。我帮你拆解下原因，再给出可行的解决方案：

问题根源分析 #

1. 事件对象未正确传递：你在HTML里调用handler函数时，大概率没把事件对象传进去，导致函数里的e是undefined，调用e.preventDefault()直接报错，后续的Ajax代码也会被中断。
2. preventDefault()位置不合理：你把它放在Ajax请求之后，如果前面的代码出问题（比如事件对象不存在），根本执行不到这一步，表单还是会默认提交刷新页面，Ajax请求自然被中断。
3. 按钮默认类型干扰：如果你的提交按钮是<button>标签，它默认的type是submit，可能在onclick触发前就触发了表单的默认提交行为。

具体解决方案 #

方案1：修正inline onclick的事件传递，调整代码顺序

首先在HTML调用handler时传递event对象，同时把preventDefault()移到函数最开头，加个判断避免报错：

<form>
    <input type="text" name="username" placeholder="username">
    <input type="password" name="password" placeholder="password">
    <!-- 传递event参数，显式设置按钮type为button避免默认提交 -->
    <button type="button" onclick="handler('your-identifier', event)">提交</button>
</form>

function handler(identifier, e) {
    // 先阻止默认行为，确保表单不会提交
    if (e) {
        e.preventDefault();
    }
    // 加try-catch和错误处理，方便排查问题
    try {
        var datastring = $('form').serializeArray();
        $.ajax({
            url: "core.php?type=" + identifier,
            data: datastring,
            method: "POST",
            success: function(data) {
                alert('ok');
            },
            error: function(xhr, status, error) {
                console.error('Ajax请求出错:', error);
                alert('请求失败，可查看控制台详情');
            }
        });
    } catch(err) {
        console.error('代码执行出错:', err);
    }
}

方案2：改用jQuery事件绑定（更推荐）

inline事件绑定容易出现传递问题，改用jQuery的事件绑定更可靠，也更易维护：

<form id="login-form">
    <input type="text" name="username" placeholder="username">
    <input type="password" name="password" placeholder="password">
    <button type="button" id="submit-btn">提交</button>
</form>

$(function() {
    $('#submit-btn').on('click', function(e) {
        e.preventDefault();
        var identifier = 'your-identifier'; // 也可以从按钮的data属性获取，比如data-identifier="login"
        var datastring = $('#login-form').serializeArray();
        
        $.ajax({
            url: "core.php?type=" + identifier,
            data: datastring,
            method: "POST",
            success: function(data) {
                alert('ok');
            },
            error: function(xhr, status, error) {
                console.error('Ajax请求失败:', error);
            }
        });
    });
});

额外排查点 #

如果Ajax还是没运行，打开浏览器控制台（F12）检查：

• core.php的URL是否正确，有没有跨域问题
• serializeArray()返回的参数是否完整，有没有遗漏表单字段
• 服务器端是否正常响应，有没有返回错误状态码

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