关于ajax的一个小问题

Question

请假，如果我用form表单提交，有一个submit标签，我给submit添加了一个事件监听，调用ajax。但是实际的是，点击submit后，直接提交了表单，没有走ajax。这个是怎么回事呢？

Answer 1

可能是因为你没有阻止表单默认的提交行为。可以在事件监听函数中使用 event.preventDefault() 方法来阻止表单的默认提交行为，然后再使用 ajax 提交表单数据。示例代码如下：

document.querySelector('form').addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单默认提交行为
  // 使用 ajax 提交表单数据
  // ...
});

另外，如果你使用的是 <button type="submit"> 标签作为提交按钮，也可以在按钮上添加 type="button" 属性，这样就不会触发表单的默认提交行为了。示例代码如下：

<button type="button" id="submit-btn">提交</button>

document.querySelector('#submit-btn').addEventListener('click', function() {
  // 使用 ajax 提交表单数据
  // ...
});