Vue js 2 和 Axios 发布请求 - 表单
Posted
技术标签:
【中文标题】Vue js 2 和 Axios 发布请求 - 表单【英文标题】:Vue js 2 & Axios Post Request - Form 【发布时间】:2017-10-02 15:35:14 【问题描述】:我正在尝试使用 axios 发布我的表单,但我无法使用 expressjs 将数据发送到我的后端
这就是我正在做的:
<template>
<form class="" method="post" @submit.prevent="postNow">
<input type="text" name="" value="" v-model="name">
<button type="submit" name="button">Submit</button>
</form>
</template>
export default
name: 'formPost',
data()
return
name: '',
show: false,
;
,
methods:
postNow()
axios.post('http://localhost:3030/api/new/post',
headers:
'Content-type': 'application/x-www-form-urlencoded',
,
body: this.name,
);
,
components:
Headers,
Footers,
,
;
后端文件:
app.use(bodyParser.json());
app.use(bodyParser.urlencoded( extended: true ));
router.post('/new/post', (req, res) =>
res.json(console.log("this is working" + ' ' + req.body.name));
);
我收到的错误是:
this is working undefined
【问题讨论】:
posti
未在任何地方定义并在此处使用 body: this.posti
对不起,我更新了我的问题,应该是 this.name
哦,我刚刚注意到:您的方法不在 methods
对象内。将其与data
、components
等一起放入methods
。
对不起,我有更多的组件和方法,在编辑以确保安全时,我不小心删除了它。刚刚更新!
【参考方案1】:
axiospost
格式:
axios.post(url[, data[, config]])
您的要求应该是:
axios.post('http://localhost:3030/api/new/post',
this.name, // the data to post
headers:
'Content-type': 'application/x-www-form-urlencoded',
).then(response => ....);
小提琴:https://jsfiddle.net/wostex/jsrr4v1k/3/
【讨论】:
没有key怎么处理value? @Pradiptadas 你是什么意思?你能解释一下吗? 我的意思是说你正在发布“this.name”,这是一个值。但是如何在服务器端访问该值,就像我使用 python/django 一样。我必须写 request.POST.get('key') 。什么是关键? @EgorStambakio @Pradiptadas 你可以发布 name: this.name
而不是this.name
。
不,我之前尝试过你的解决方案,它不起作用【参考方案2】:
<template>
<div id="content">
<h1>...</h1>
<div>
<label>Product Name</label> : <input type="text" id="txt1" v-model="model.productName" />
</div>
<div>
<label>Desciription</label> : <input type="text" id="txt2" v-model="model.descrption" />
</div>
<div>
<button type="button" v-on:click="saveClick">Save</button>
</div>
</div>
<hr />
<hr />
<h1>...</h1>
<table border="1" style="margin:auto">
<thead>
<tr>
<th style="width: 100px">ID</th>
<th style="width: 100px">Product Name</th>
<th style="width: 100px">Desciription</th>
<th style="width: 100px"></th>
</tr>
</thead>
<tbody>
<tr v-for="item in model.list" v-bind:key="item.id">
<td> item.id </td>
<td> item.productName </td>
<td> item.descrption </td>
<td><button type="button" v-on:click="deleteClick(item.id)">Delete</button></td>
</tr>
</tbody>
</table>
</template>
<script>
import axios from "axios";
export default
name: "Product",
data: function ()
return
model:
productName: "",
descrption: "",
,
list: [],
;
,
methods:
saveClick()
axios
.post("http://example.com", this.model)
.then((resp) =>
this.getList();
alert("success" + resp.data.id);
);
,
getList()
axios.get("http://example.com").then((resp) =>
this.model.list = resp.data;
);
,
deleteClick(id)
axios.delete("http://example.com" + id).then(() =>
this.getList();
alert("success");
);
,
mounted: function ()
this.getList();
,
;
</script>
【讨论】:
我正在使用 axios 处理 vue js。这段代码肯定有效以上是关于Vue js 2 和 Axios 发布请求 - 表单的主要内容,如果未能解决你的问题,请参考以下文章
Axios 获取请求返回 [代理代理] - Flask 和 Vue.js