vue+vue-resource post请求
1.目录结构
2.learnVue.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>learnVue</title>
</head>
<body>
<div id="app">
<div>输入的值:{{ name }}</div>
<div><input v-model="name"></div>
<div><button v-on:click="submitInfo">提交</button></div>
<div>返回的值:{{ result }}</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.js"></script>
<script src="js/learnVue.js"></script>
</body>
</html>
3.learnVue.js
var app = new Vue({
el: '#app',
data: {
name:'xu',
result:'',
apiUrl: 'http://127.0.0.1:8889/POST/submitInfo'
},
methods: {
submitInfo: function () {
var vm = this;
var data = {};
var name = vm.name;
data.name = name;
data = JSON.stringify(data);
vm.$http.post(vm.apiUrl, data)
.then((response) => {
vm.result = response.body;
});
}
}
})
4.learnVue.js(nodejs)
exports.learnVue = (function () {
var learnVue = {
submitInfo: function (app) {
app.post('/POST/submitInfo', function (req, res) {
console.log('name:' + req.body.name);
res.send(req.body.name);
});
}
};
return learnVue;
}());
5.运行结果
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步