vue.js与后台数据交互
2018-01-23 11:34
756 查看
第一步:引入js库:
前端代码:
后端接口响应:
效果:
<script src="../js/common/vue.min.js"></script> <script src="../js/common/vue-resource.js"></script>
前端代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue example</title>
<link rel="stylesheet" href="../my/style.css">
<script src="../js/common/vue.min.js"></script> <script src="../js/common/vue-resource.js"></script>
</head>
<body>
<div id="app">
<input type="button" @click="get()" value="点击" />
</div>
</body>
<script>
new Vue({
el : '#app',
data : {
},
methods:{
get:function(){
this.$http.get('/getData').then((response) => {
console.log(response);
alert(response.data);
},function(){
alert('请求失败!');
});
}
}
});
</script>
</html>
后端接口响应:
.... @RequestMapping("/getData") @ResponseBody public String getDatas() { return "data"; } ....
效果:
相关文章推荐
- vue.js与后台数据交互的实例讲解
- vue.js 2.0入门级前端和后台数据交互
- 详解vue前后台数据交互vue-resource文档
- 最新的vue webpack模板没有dev-server.js文件,进行后台数据模拟笔记
- vuejs组件交互 - 01 - 父子组件之间的数据交互
- js前台与后台数据交互-前台调后台【转】
- JS调用后台方法进行数据交互
- vue.js+elementUI学习01之后台管理登录验证实现axios和springMVC交互
- vue.js配合$.post从后台获取数据简单demo分享
- vuejs父子组件之间数据交互详解
- vue实现数据的绑定以及如何进行和后台php就行数据的交互
- 多种方式实现JS调用后台方法进行数据交互
- angluarjs flask 前后台数据交互传递 异步请求
- vue.js 三(数据交互)isomorphic-fetch
- vue前后台数据交互vue-resource文档
- 3、web(js):js前台与后台数据交互-前台调后台
- django 后台与前端js数据交互对ajax封装
- js前台与后台数据交互-前台调后台
- 最新的vue没有dev-server.js文件,如何进行后台数据模拟?
- .net网站与Winform窗体的数据交互(JS调用Winform后台方法实现)