如何在Vue.js中不通过Ajax以POST方法跳转至Laravel控制器？

嘿，我懂你想要的效果——不用axios这类异步AJAX请求，而是通过POST方式直接跳转页面到Laravel控制器，这样就能在控制器里用dd()或者var_dump()直接看到调试输出，对吧？

之所以用axios看不到调试内容，是因为它是异步请求，控制器返回的内容会被前端JavaScript处理，不会触发页面刷新，自然看不到dd()的输出。下面给你两种实用的解决方法：

方法一：直接在Vue模板中使用HTML表单 #

如果你的Vue组件里可以直接嵌入表单，这是最直观的方式：

<template>
  <form method="POST" action="/add-hotel-listing">
    <!-- 必须添加Laravel的CSRF令牌，否则会被CSRF保护拦截 -->
    @csrf
    <!-- 绑定你需要提交的Vue数据字段 -->
    <input type="text" name="hotel_name" v-model="finish.hotel_name">
    <input type="text" name="hotel_address" v-model="finish.hotel_address">
    <!-- 提交按钮 -->
    <button type="submit">提交并调试</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      finish: {
        hotel_name: '',
        hotel_address: ''
      }
    }
  }
}
</script>

对应的Laravel控制器代码不用修改，保持你原来的写法即可：

public function addHotelListing(Request $request){
    $input = $request->all();
    dd($input); // 提交表单后，页面会直接显示这个调试内容
}

方法二：在Vue方法中动态创建表单并提交 #

如果不想在模板里写表单，或者需要在某个Vue方法触发后才提交，可以动态创建一个表单元素并自动提交：

<script>
export default {
  data() {
    return {
      finish: {
        hotel_name: '测试酒店',
        hotel_address: '测试街道123号'
      }
    }
  },
  methods: {
    submitForDebug() {
      // 创建表单元素
      const form = document.createElement('form');
      form.method = 'POST';
      form.action = '/add-hotel-listing';

      // 添加CSRF令牌（从页面meta标签获取）
      const csrfToken = document.querySelector('meta[name="csrf-token"]').content;
      const csrfInput = document.createElement('input');
      csrfInput.type = 'hidden';
      csrfInput.name = '_token';
      csrfInput.value = csrfToken;
      form.appendChild(csrfInput);

      // 循环添加要提交的参数
      Object.keys(this.finish).forEach(key => {
        const input = document.createElement('input');
        input.type = 'hidden';
        input.name = key;
        input.value = this.finish[key];
        form.appendChild(input);
      });

      // 将表单添加到页面并自动提交
      document.body.appendChild(form);
      form.submit();
    }
  }
}
</script>

调用这个submitForDebug()方法后，页面会直接跳转到控制器处理后的页面，你写的dd($input)就会直接显示在浏览器里，完美满足调试需求。

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