[英]Submit a form using POST request in VueJS
I have an endpoint to submit data using POST request,我有一个端点可以使用 POST 请求提交数据,
http://localhost:3000/entry
Keys are fname, lname, age
键是fname, lname, age
I can make a POST request into the given end point and it will create an entry.我可以向给定的端点发出 POST 请求,它会创建一个条目。
I am trying to submit a form using VueJS.我正在尝试使用 VueJS 提交表单。 But, when I am calling the API within the form, it is not submitting the data.但是,当我在表单中调用 API 时,它没有提交数据。 I have checked the network calls and it is not sending any data to the end point.我检查了网络调用,它没有向端点发送任何数据。
HTML :- HTML :-
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.4/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.16/vue-resource.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<div id="vueApp">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h3>
Dashboard
</h3>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label for="fname">First Name</label>
<input type="text" class="form-control" value="" v-model="fname" />
</div>
<div class="form-group">
<label for="lname">Last Name</label>
<input type="text" class="form-control" value="" v-model="lname" />
</div>
<div class="form-group">
<label for="age">Age</label>
<input type="text" class="form-control" value="" v-model="age" />
</div>
</div>
<div class="col-sm-12">
<a href="#" class="btn btn-success" @click="submitEntry">Submit</a>
<span v-if="ajaxRequest">Please Wait ...</span>
</div>
</div>
<div> </div>
<div class="row" v-if="debug">
<div class="col-sm-12">
<pre>{{ $data | json }}</pre>
</div>
</div>
<!-- Table Start -->
<div class="row">
<table style="width:100%">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
<tr>
<td>{{fname}}</td>
<td>{{lname}}</td>
<td>{{age}}</td>
</tr>
</table>
</div>
<!-- Table END -->
</div>
</div>
script.js :-脚本.js :-
Vue.http.options.emulateJSON = true;
new Vue({
el: '#vueApp',
data: {
debug: true,
fname: '',
lname: '',
age: '',
ajaxRequest: false,
postResults: []
},
methods: {
submitEntry: function() {
this.ajaxRequest = true;
this.$http.post('http://localhost:3000/entry', {
fname: this.fname,
lname: this.lname,
age: this.age
}, function (data, status, request) {
this.postResults = data;
this.ajaxRequest = false;
});
}}
});
style.css :- style.css :-
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
You can try this one.你可以试试这个。
axios.post('http://localhost:3000/entry',{ params: { fname: this.fname, lname: this.lname, age: this.age }})
.then(response => this.responseData = response.data)
.catch(error => {});
Before using you need to link with Axios CDN使用前需要链接Axios CDN
https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js
Even though this is a bit old, I just ran into this same issue where no data was sent to the endpoint (and this question comes up first in Google).即使这有点旧,我也遇到了同样的问题,没有数据发送到端点(这个问题首先出现在谷歌中)。 The problem is that vue-resource's $http.post() defaults to posting data as resource/json and not a form.问题是 vue-resource 的 $http.post() 默认将数据发布为资源/json 而不是表单。 To post a form , set emulateJSON to true which will send the "request body as application/x-www-form-urlencoded content type" .要发布表单,请将emulateJSON设置为 true,这将发送“请求正文作为应用程序/x-www-form-urlencoded 内容类型” 。
As an aside, the result is a Promise, which means then() should be used to handle the response (as @ribas correctly mentioned).顺便说一句,结果是一个 Promise,这意味着应该使用 then() 来处理响应(正如@ribas 正确提到的那样)。
So the submitEntry() in the example above should be:所以上例中的 submitEntry() 应该是:
submitEntry: function() {
this.ajaxRequest = true;
this.$http.post('http://localhost:3000/entry', {
fname: this.fname,
lname: this.lname,
age: this.age
}, {
emulateJSON: true // <-- This was missing
}).then(function (data) { // <-- Handle results like this
this.postResults = data;
this.ajaxRequest = false;
});
}}
Using a completely different library (axios) is fine and actually recommended by Evan You (creator of Vue) , but it doesn't address the actual problem using the vue-resource ajax library.使用完全不同的库 (axios) 很好,实际上是 Evan You(Vue 的创建者)推荐的,但它没有解决使用 vue-resource ajax 库的实际问题。
Maybe something like this也许像这样
this.$http({method: 'POST', url: URL, data: data})
.then(response => {
this.postResults = data;
this.ajaxRequest = false;
}).catch((err) => {
console.log(err)
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.