Vue2模拟POST表单提交：带跳转的最优实现方案问询

我之前也碰到过一模一样的情况！在Vue2里要实现和原生表单POST完全一致的提交+页面跳转效果，最有效的方法是动态创建原生<form>元素并触发提交——毕竟你之前尝试的两种方式都有各自的局限性：

• 用jQuery触发submit()：如果你的表单是Vue动态渲染的，很可能在调用方法时表单还没挂载到DOM上，或者Vue的响应式更新导致事件绑定异常，所以没生效；
• 用FormData配合AJAX（axios/fetch）：这类异步请求本身就是为了不刷新页面获取数据设计的，自然不会触发浏览器的页面跳转。

具体实现代码（Vue2组件内） #

直接在组件的methods里写一个提交方法就行，完全用原生JS实现，不依赖任何第三方库：

methods: {
  submitWithRedirect() {
    // 1. 准备要提交的表单数据（直接复用Vue的响应式数据即可）
    const postData = {
      username: this.username,
      orderId: this.orderId,
      totalPrice: this.totalPrice,
      // 后端有CSRF校验的话，记得带上Token，不同框架字段名可能不同
      csrfmiddlewaretoken: document.querySelector('[name=csrfmiddlewaretoken]')?.value || ''
    };

    // 2. 创建原生form元素
    const form = document.createElement('form');
    form.method = 'POST';
    form.action = '/your-target-api'; // 替换成你的目标接口地址
    // 要在新窗口打开跳转的话，添加这行：form.target = '_blank';
    // 上传文件需设置编码：form.enctype = 'multipart/form-data';

    // 3. 把数据转换成hidden input添加到form中
    Object.entries(postData).forEach(([key, value]) => {
      const input = document.createElement('input');
      input.type = 'hidden';
      input.name = key;
      input.value = value;
      form.appendChild(input);
    });

    // 4. 挂载form到DOM并提交（浏览器会自动处理跳转）
    document.body.appendChild(form);
    form.submit();

    // 5. 提交后清理DOM（当前页面跳转可省略；新窗口跳转建议延迟清理）
    setTimeout(() => {
      document.body.removeChild(form);
    }, 100);
  }
}

为什么这个方法有效？ #

这种方式完全复刻了原生表单的提交流程：浏览器会把form内的字段以POST方式发送到目标地址，然后自动处理页面跳转（无论是当前页面刷新还是新窗口打开），和你直接写静态<form>点击提交的效果完全一致，没有任何异步逻辑干扰。

额外注意点 #

• 如果后端要求CSRF校验，一定要把对应Token作为字段一起提交（比如Django的csrfmiddlewaretoken、Spring的_csrf）；
• 若需要提交文件，除了设置enctype，还要额外处理文件对象的添加逻辑；
• 当前页面跳转时，无需手动移除form，页面刷新后DOM会自动重置；新窗口跳转则建议延迟清理，避免DOM冗余。

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