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

这里需要导入vue.js的jar包<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><

wwww8952

12497人浏览 · 2018-11-18 21:36:10

wwww8952 · 2018-11-18 21:36:10 发布

这里需要导入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;
	}

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^