如何防止在表单提交上调用函数时加载页面？

要防止在表单提交上调用函数时加载页面，可以采取以下方法：

使用JavaScript事件对象的preventDefault()方法。在表单提交事件的处理函数中，调用该方法可以阻止表单默认的提交行为，从而避免页面刷新。

document.querySelector('form').addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单默认提交行为
  // 执行其他操作，如数据验证、异步请求等
});

通过ajax异步提交表单。使用ajax技术可以实现无刷新提交表单数据，从而避免页面加载。

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

  // 获取表单数据
  var formData = new FormData(this);

  // 发送ajax请求
  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'your-api-endpoint', true);
  xhr.onload = function() {
    if (xhr.status === 200) {
      // 请求成功处理
    } else {
      // 请求失败处理
    }
  };
  xhr.send(formData);
});

在这种情况下，需要在服务器端相应的API中接收并处理表单数据。

以上是两种常见的方法来防止在表单提交上调用函数时加载页面。通过阻止表单默认提交行为或使用ajax异步提交表单数据，可以实现在不刷新页面的情况下处理表单数据，提升用户体验。在实际应用中，可以根据具体需求选择合适的方法来防止页面加载。