Question

我正在使用axios和vue在Laravel中发布ajax，我有一个@click="postData"按钮，其形式可切换axios发布请求：

postData() {
      axios({
          method: 'post',
          url: appJS.base_url + '/comment',
          responseType: 'json',
          data: comData
        })
        .then(function(response) {

        })

但是我仍然需要在表单中添加操作，方法和 csrf 吗？

<form action="{{ url('/comment') }}" method="POST">
{{ csrf_field() }}
</form>

vs

<form></form>

使用<form></form>一切都可以正常工作，但是我想知道是否有优点/缺点吗？

由于我不希望整个页面重新加载，所以我正在后台进行ajax调用

Answer 1

您肯定不需要action标签上的method和form属性，因为它们已在axios调用中定义。

对于csrf_field()，您可能仍然需要它，因为Laravel有一个预先配置的中间件，称为VerifyCsrfToken。但这取决于您是否使用它。

Answer 2

您可以在vuejs中使用事件表单，而无需使用ajax，可以尝试以下代码，但是如果使用laravel + vuejs，则需要在laravel中添加为单个路由启用CORS：https://gist.github.com/drewjoh/43ba206c1cde9ace35de154a5c84fc6d

export default{
        data(){
            return{
                title:"Form Register",
            }
        },
        methods:{
           register(){
                this.axios.post("http://localhost:8888/form-register",this.formdata).then((response) => {
                       console.log(response);
                      
                  });
                    
            },
 
        }
    }

 <form action="" method="post" v-on:submit.prevent="register">
    <div class="panel-heading">{{title}}</div>
    <div class="form-group">
      <button type="submit" class="btn btn-danger">Register</button>
      <button type="reset" class="btn btn-success">Reset</button>                  
    </div>
 </form>

Laravel vue axios是ajax表单所需的操作方法和csrf

2 个答案: