表单提交时页面仍刷新，已用preventDefault等方法无效求助

安全阿岳

2026-5-28

解决表单提交时页面刷新的问题

我看了你的代码，问题主要出在事件对象传递错误和函数作用域/执行问题上——虽然你用了preventDefault()和return false，但这些方法根本没作用在正确的事件对象上，导致表单还是会触发默认的提交刷新行为。

问题分析

事件对象传递错误：
你的按钮点击事件写的是onclick="formSubmit(this)"，这里传递给formSubmit的是按钮DOM元素，而非事件对象。但你的函数里却把这个参数当作事件对象调用e.preventDefault()——这时候e是按钮元素，不是事件，所以这个方法完全无效，表单还是会按默认行为提交刷新。
自执行函数未正确执行：
你写的自执行函数最后缺少了调用括号，正确的自执行函数格式应该是(function($) { ... })(jQuery);，否则里面的formSubmit函数根本不会被定义到可访问的作用域里，浏览器可能找不到这个函数，直接走了表单默认提交流程。
内联事件绑定的局限性：
用onclick这种内联绑定方式不仅容易出现作用域问题，还没法很好地处理表单的回车提交场景（用户按回车提交时，按钮的onclick不会触发，表单还是会刷新）。

修正方案

推荐你去掉内联的onclick属性，改用jQuery的事件绑定来处理，这样能更可靠地拦截表单提交行为，同时支持复用多个表单。

步骤1：修改HTML（移除内联onclick）

<form id="register" action="#" method="POST"> 
  <div class="input-group"> 
    <input class="form-control form-control-sm" placeholder="Email Address" name="email" type="text"> 
    <input type="hidden" name="form" value="register"> 
    <input type="hidden" name="type" value="websiteregistration"> 
    <span class="input-group-append"> 
      <button type="submit" class="btn btn-light" data-name="register">Go!</button> 
    </span> 
  </div> 
</form>

步骤2：修正JavaScript代码（绑定表单submit事件）

这个方案会拦截所有表单的提交行为，不管是点击按钮还是回车提交都能处理，同时通过data-name或表单ID复用逻辑：

// 正确执行的jQuery自执行函数
(function($) {
  // 绑定所有表单的submit事件
  $(document).on('submit', 'form', function(e) {
    // 阻止表单默认提交行为（此时e是正确的事件对象）
    e.preventDefault();
    e.stopPropagation();
    
    var $form = $(this);
    // 如果需要用到data-name，从按钮上获取
    var formName = $form.find('button[data-name]').data('name');
    
    // 发送AJAX请求
    $.ajax({
      type: $form.attr('method'),
      url: '(url)', // 替换为你的实际接口地址
      data: $form.serialize(),
      success: function (data) {
        console.log('Submission was successful.');
        console.log(data);
      },
      error: function (data) {
        console.log('An error occurred.');
        console.log(data);
      }
    });

    return false;
  });
})(jQuery); // 传递jQuery作为自执行函数的$参数，确保函数正确执行

如果你想保留按钮的data-name绑定逻辑

也可以直接绑定按钮的点击事件，但记得同时阻止表单默认行为：

(function($) {
  $(document).on('click', 'button[data-name]', function(e) {
    e.preventDefault();
    e.stopPropagation();
    
    var $btn = $(this);
    var formId = $btn.data('name');
    var $form = $('#' + formId);
    
    $.ajax({
      type: $form.attr('method'),
      url: '(url)',
      data: $form.serialize(),
      success: function (data) {
        console.log('Submission was successful.');
        console.log(data);
      },
      error: function (data) {
        console.log('An error occurred.');
        console.log(data);
      }
    });

    return false;
  });
})(jQuery);

这样修改后，表单提交时就不会再刷新页面，同时AJAX请求也能正常发送数据。

内容的提问来源于stack exchange，提问作者Litsher - Nathan