使用 ajax 在 Vue.js 中提交表单

Posted 2023-02-22

【中文标题】使用 ajax 在 Vue.js 中提交表单

【英文标题】：Submitting form in Vue.js with ajax

【发布时间】：2015-10-18 23:47:13

【问题描述】：

我真的很纠结如何使用 Vue.js 和 vue-resource 提交一个发出 ajax 请求的表单，然后使用响应来填充一个 div。

我使用 js/jQuery 从一个项目到另一个项目这样做：

在刀片中查看

!! Form::open(['route' => 'formRoute', 'id' => 'searchForm', 'class' => 'form-inline']) !!
    <div class="form-group">
        <input type="text" name="id" class="form-control" placeholder="id" required="required">
    </div>
    <button type="submit" class="btn btn-default">Search</button>
!! Form::close() !!

js/jquery

var $searchForm = $('#searchForm');
var $searchResult = $('#searchResult');

$searchForm.submit(function(e) 
    e.preventDefault() ;

    $.get(
        $searchForm.attr('action'),
        $searchForm.serialize(),
        function(data) 
            $searchResult.html(data['status']);
        
    );
);

到目前为止我在 Vue.js 中所做/尝试过的事情：

在刀片中查看

!! Form::open(['route' => 'formRoute', 'id' => 'searchForm', 'class' => 'form-inline']) !!
    <div class="form-group">
        <input type="text" name="id" class="form-control" placeholder="id" required="required">
    </div>
    <button type="submit" class="btn btn-default" v-on="click: search">Search</button>
!! Form::close() !!

vue/js

    Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('value');

    new Vue(
        el: '#someId',

        data: 

        ,

        methods: 
            search: function(e) 
                e.preventDefault();

                var req = this.$http.get(
                    // ???, // url
                    // ???, // data
                    function (data, status, request) 
                        console.log(data);
                    
                );
            
        
    );

我想知道在处理响应时是否可以使用组件将响应数据输出到div？

只是总结一下：

如何使用 vue js 和 vue-resource 而不是我通常的 jQuery 方式提交表单？ 使用来自 ajax 的响应，如何最好使用组件将数据输出到 div 中？

【参考方案1】：

我使用了这种方法，并且工作得像个魅力：

event.preventDefault();

let formData = new FormData(event.target);

formData.forEach((key, value) => console.log(value, key));

【讨论】：

var 数据 = ; formData.forEach(function(v,k) data[k]=v; );

最后一行加一个可以快速调试formData对象内部的值，非常有用。

【参考方案2】：

在您的文本输入中添加v-model="id"

然后将其添加到您的数据对象中

new Vue(
    el: '#someId',

    data: 
        id: ''
    ,

    methods: 
        search: function(e) 
            e.preventDefault();

            var req = this.$http.get(
                '/api/search?id=' + this.id,
                function (data, status, request) 
                    console.log(data);
                
            );
        
    
);

最好去掉v-on="click: search"，在form标签上加上v-on="submit: search"。

您应该在表单中添加method="GET"。 确保您的 html 标记中有 #someId。

【讨论】：

有了新的更新语法，您可以使用@submit="search"

【参考方案3】：

为了从输入中获取值，您必须使用 v-model 指令

1.刀片视图

<div id="app">
<form v-on="submit: search">
    <div class="form-group">
        <input type="text" v-model="id" class="form-control" placeholder="id" required="required">
    </div>
    
    <input type="submit" class="btn btn-default" value="Search">
</form>
</div>

<script type="text/javascript">

// get route url with blade 
var url = "route('formRoute')";

Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('value');


var app = new Vue(
    el: '#app',
    data: 
        id: '',
        response: null
    ,
    methods: 
        search: function(event) 
            event.preventDefault();
            
            var payload = id: this.id;

            // send get request
            this.$http.get(url, payload, function (data, status, request) 

            // set data on vm
            this.response = data;

            ).error(function (data, status, request) 
                // handle error
            );
        
    
);
</script>

如果您想将数据传递给组件，请使用“道具”查看文档以获取更多信息

http://vuejs.org/guide/components.html#Passing_Data_with_Props

如果你想同时使用 laravel 和 vuejs，然后结帐

https://laracasts.com/series/learning-vuejs

【讨论】：

我想你可能想在你的表单标签上使用 @submit="search" 或 v-on:submit="search" 。至少对于 Vue 2.0 vuejs.org/v2/guide/events.html