js怎么区分提交表单时的reload和普通开始打开页面

在JavaScript中，可以使用window.performance.navigation.type属性来区分提交表单时的reload和普通开始打开页面。这个属性返回一个数字，表示页面是如何加载的。下面是一些可能的值：

- 0: 此页面是通过单击链接、书签、输入网址等方式打开的，而不是通过重新加载或提交表单。
- 1: 此页面是通过重新加载按钮或JavaScript location.reload()方法重新加载的。
- 2: 此页面是通过提交表单的方式加载的。
- 255: 浏览器无法确定页面是如何加载的，通常是因为页面是从缓存中加载的。

因此，如果你想区分提交表单时的reload和普通开始打开页面，可以使用以下代码：

if (window.performance && window.performance.navigation.type === 2) {
  // 这是通过提交表单加载的页面
} else {
  // 这是普通开始打开的页面或重新加载的页面
}

请注意，window.performance.navigation.type属性可能不会在所有浏览器中都可用。

相关问题

刷新页面form表单提交了

以下是两种刷新页面的方法，分别适用于Vue和Layui框架下的form表单提交后的情况：

1. Vue框架下的刷新页面方法：

// 在Vue组件中的方法中提交表单后，可以使用以下代码刷新页面
location.reload();

2. Layui框架下的刷新页面方法：

// 在Layui的form表单提交成功的回调函数中，可以使用以下代码刷新页面
layui.use('form', function(){
  var form = layui.form;
  
  // 监听表单提交
  form.on('submit(formDemo)', function(data){
    // 表单提交成功后的操作
    // ...
    
    // 刷新页面
    location.reload();
    
    return false;
  });
});

vue提交表单后刷新页面

可以通过在表单提交之前使用 JavaScript 阻止默认行为，并在提交成功后手动刷新页面来实现。具体代码可以参考以下示例：

<form id="myForm" action="/submit" method="post">
  <!-- 表单字段 -->
  <input type="text" name="username" />
  <input type="password" name="password" />
  <button id="submitBtn" type="submit">提交</button>
</form>

<script>
  const form = document.getElementById('myForm');
  const submitBtn = document.getElementById('submitBtn');

  form.addEventListener('submit', (event) => {
    event.preventDefault(); // 阻止默认行为

    // 提交表单
    submitForm().then(() => {
      // 刷新页面
      window.location.reload();
    });
  });

  function submitForm() {
    const formData = new FormData(form);
    return fetch('/submit', { method: 'POST', body: formData });
  }
</script>

注意：在实际项目中，应该根据接口返回的状态码或其他标识来判断提交是否成功，避免因网络或其他原因导致页面频繁刷新或无法刷新的情况。