springboot ajax请求数据

在做项目时遇到的一些小问题,所以记录一下笔记,方便自己这不争气的记性,本人不是什么大牛 如果觉得有分享有毛病 欢迎指点出来...一起进步!!!
对了 差点忘记和你们说了  接口层 实现层 和数据层相信大家都会 没有太大的区别 所以我就不一一放出来了 数据层我用的是hibernate 希望能对像我一样的小伙伴有所帮助  这是第一次发博客 做得不好的地方希望多担待 !!
springboot微服务框架:
spring通过ajax请求传递参数的方法:
js:常用的方法就是将参数封装成为json格式然后进行传递到后台,后台用map容器的方式来进行接收:
var params = {};
params. username = $("#username").val();
params. email = $("#email").val();
params. phonenumber = $("#phone").val();
params. texts = $("#text").val();
其中params点后面的参数要和实体类中的变量一样(上面红颜色的)。
提交:
$.ajax({
type : "POST",//提交方式
url  : "",//提交地址 
data : params,//提交的数据
dataType : "json",
success  : function(data){  //返回结果
if(data.msg != ""){
;
}
},
//错误信息提示
error : function(data){
;
}
});
后台接收json数据并将数据放到实体类中 
@RequestMapping("add")
@ResponseBoy
public Map add(MessageBoard dataVo){
Map maps = null;
//可以加入其它的业务逻辑判断
if(dataVo.getUsername == null || dataVo.getTxt == null || ....){
maps = new HashMap();
maps.put("msg","参数不合法");
return maps;
}
System.out.println("接收到数据"+dataVo.getTxt+...);
//将数据插入数据库 提交时间为String类型 所以转换一下
SimpleDataFormat sdf = new SimpleDataFormat("yyyy-mm-dd HH:mm:ss");
Date date = new Date();
String str = sdf.format(date);
dataVo.setCurrenttime(sdf);
//保存方法service层的方法
MessageBoardService.save(dataVo);
System.out.println("保存成功");
return maps;
}


springboot通过ajax 请求后台数据展示在前台页面上
后台通过方法将数据库的内容请求到
@RequestMapping(value = "datas" , method = RequestMethod.POST)
@ResponseBody
public List datas(){
  List list = new ArrayList();
  //查询出所有的数据
  list = MessageBoardService.findAll();
  //遍历数据看一下有没有获得数据
  for(MessageBoard messageBoard : list){
System.out.println(messageBoard);
}
 
        return list;
}

//前台js  这里使用的是avalon.js 因为封装的很好所以感兴趣的伙伴可以去看看
var viewmodel = avalon.define({
$id : " viewmodel", //id要和页面上的body属性的名称一致
datalist : {},
text : "数据请求",
request : function(){
$.ajax({
type : "post",
url : "", //请求的地址
data : {},
success : function(data){
$('button').removeClass("btn-primary").addClass("btn-success").attr('disabled', true);
viewmodel.datalist = data;
viewmodel.text = "数据请求成功,已经渲染";
}
});
}

});


//前端页面需要引入avalon.js和jQuery
<script src="https://cdnjs.cloudflare.com/ajax/libs/avalon.js/2.1.6/avalon.js"></script>


页面内容
<title>查看页面</title>
</head>
<body ms-controller="viewmodel">
<h4>这里是查看页面</h4>
<button type="button" class="btn btn-primary" style="margin: 10px;" ms-click="@request">{{@text}}</button>
<table class="table table-striped">
<thead>
<tr>
<td class="active">id</td>
<td class="success">姓名</td>
<td class="warning">性别</td>
<td class="danger">年龄</td>
<td class="info">角色</td>
</tr>
</thead>
<tbody>
<tr ms-for="el in @datalist">
<td >{{el.messid}}</td>
<td >{{el.username}}</td>
<td>{{el.email}}</td>
<td >{{el.phonenumber}}</td>
<td >{{el.texts}}</td>
</tr>
</tbody>
</table>


</body>
</html>
//看到数据成功


猜你喜欢

转载自blog.csdn.net/qq_37531990/article/details/78584803