我真的很纠结如何使用 Vue.js 和 vue-resource 提交一个发出 ajax 请求的表单,然后使用响应来填充一个 div。
我用 js/jQuery 像这样从一个项目到另一个项目执行此操作:
在 Blade 中查看
{!! 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 中所做/尝试的事情:
在 Blade 中查看
{!! 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?
最佳答案
我使用了这种方法并且非常有效:
event.preventDefault();
let formData = new FormData(event.target);
formData.forEach((key, value) => console.log(value, key));
关于javascript - 使用 ajax 在 Vue.js 中提交表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31676005/