Ajax/PHP实现加载显示隐藏遇问题：classList报错及页面刷新

1. 解决Cannot read properties of undefined (reading 'add')报错 #

你用jQuery选择器$('div.loading')获取的是jQuery对象，而classList是原生DOM元素的属性，两者不兼容导致报错。直接替换为jQuery的类操作方法即可：

• 添加类：$('div.loading').addClass('d-block')
• 移除类：$('div.loading').removeClass('d-block')

2. 解决页面刷新问题 #

页面刷新是因为表单默认提交行为未被阻止。确保在事件处理逻辑中明确阻止默认行为，比如绑定表单submit事件时，调用event.preventDefault()，同时保证return false处于事件函数的外层（异步回调里的return不会生效）。

修复后的完整代码 #

// 绑定表单submit事件
$('form').on('submit', function(e) {
  // 阻止表单默认提交行为
  e.preventDefault();

  $.ajax({
    url: "/send_email",
    type: "POST",
    data: $(this).serialize(), // 用$(this)指代当前表单，避免全局选择器的潜在问题
    beforeSend: function() {
      $('div.loading').addClass('d-block');
    }
  })
  .done(function(response) {
    $('div.loading').removeClass('d-block');
    $('div.message').html(response);
  });

  // 双重保险，防止默认行为触发
  return false;
});

补充说明 #

• 如果一定要用原生classList，可以把jQuery对象转为原生DOM元素：$('div.loading')[0].classList.add('d-block')，但推荐用jQuery方法保持代码一致性。
• 确保d-block类的CSS规则正确（比如设置display: block;，而初始状态下.loading的display为none），这样添加类后才能正常显示加载状态。

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