javascript 阻止表单重新加载 - Javascript

在表单提交时，网页会重新加载。有时候我们需要阻止表单重新加载，可以使用Javascript来实现。下面是几种实现方式：

1. 使用event.preventDefault()

在提交事件调用函数中，使用event.preventDefault()方法可以阻止表单重新加载。

document.querySelector('form').addEventListener('submit', function(event) {
  event.preventDefault();
  // 在这里写你的逻辑代码
});

2. 将表单提交方式改为ajax

使用ajax提交表单可以避免表单重新加载，同时还可以异步提交表单数据。

document.querySelector('form').addEventListener('submit', function(event) {
  event.preventDefault();
  var form = this;
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      console.log(xhr.responseText);
      // 在这里写你的逻辑代码
    }
  }
  xhr.open('POST', form.action);
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.send(new FormData(form));
});

3. 使用JQuery

使用JQuery可以大大简化上面的代码。

$('form').submit(function(event) {
  event.preventDefault();
  $.post($(this).attr('action'), $(this).serialize(), function(data) {
    console.log(data);
    // 在这里写你的逻辑代码
  });
});

总结

以上三种方式可以实现阻止表单重新加载，可以根据自己的需要选择适合自己的方式。