使用vue 的get()方法向后台获取数据

最新推荐文章于 2024-02-02 16:44:55 发布

wwww8952

最新推荐文章于 2024-02-02 16:44:55 发布

阅读量1.2w

点赞数 1

本文链接：https://blog.csdn.net/qq_42694534/article/details/84205248

版权

这里需要导入vue.js的jar包

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery/jquery-2.1.4.min.js"></script>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box"> 
	<input type="button" @click="get()" value="确定">
</div>
</body>
<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
<script type="text/javascript">
window.onload = function(){
    var vm = new Vue({
        el:'#box',
        data:{
        	sites:[ ],
        },
        methods:{ 
	        get:function(){
	            //发送get请求
	            this.$http({           //调用接口
                    method:'GET',
                    url:"adminRoleAction.action?methodName=queryAdminRole" , 
                    params:{ }
                }).then(function(params){  //接口返回数据  
                	console.log(params );
                },function(error){
                })
	        } 
	    }   
    });
}
</script>
</html>

后台代码:

	public String queryAdminRole(HttpServletRequest request,HttpServletResponse response) throws Exception{
		//获取的数据
		List<AdminRole> allAdminRole = iard.getAllAdminRole(adminRole, pb); 
		//将数据放入map集合
		Map<String, Object> map=new HashMap<>();
		map.put("rows", allAdminRole);
		mapper.writeValue(response.getOutputStream(), map);
		return null;
	}