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

我真的被困在如何使用Vue.js和Vue资源提交一个发出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() !!}

{!! 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中所做/尝试的内容：

在刀片服务器中查看

{!! 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() !!}

{!! 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() !!}

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

总结一下：

如何使用vue js和vue资源而不是通常的jQuery方式提交表单

使用ajax的响应，如何更好地使用组件将数据输出到div中

在此方面的任何帮助都将不胜感激，谢谢

在文本输入中添加

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”

并在表单标签上添加

v-on=“submit:search”

您应该在表单上添加

method=“GET”

确保html标记中有

#someId

---

为了从输入中获取值，必须使用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>

//使用刀片获取路由url
var url=“{route（'formRoute'）}}”；
Vue.http.headers.common['X-CSRF-TOKEN']=document.querySelector（'#TOKEN'）.getAttribute（'value'）；
var app=新的Vue({
el:“#应用程序”，
数据：{
id:“”，
答复：空
},
方法：{
搜索：功能（事件）{
event.preventDefault（）；
var有效负载={id:this.id}；
//发送获取请求
这是.http.get（url、有效负载、函数（数据、状态、请求）{
//在虚拟机上设置数据
这个响应=数据；
}).错误（功能（数据、状态、请求）{
//处理错误
});
}
}
});

如果要将数据传递给组件，请使用“道具”，有关详细信息，请参阅文档

如果您想同时使用laravel和vuejs，请签出

---

我希望这对你有帮助

我采用了这种方法，工作起来很有魅力：

event.preventDefault();

let formData = new FormData(event.target);

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

---

使用新的更新语法，您可以使用

@submit=“search”

我想您可能希望在表单标签上使用@submit=“search”或v-on:submit=“search”。至少对于Vue 2.0 var data={}；forEach（函数（v，k）{data[k]=v；}）；最后一行加上一个用于快速调试formData对象内的值，非常有用。