springboot ajax請求資料
阿新 • • 發佈：2019-01-27
在做專案時遇到的一些小問題，所以記錄一下筆記，方便自己這不爭氣的記性，本人不是什麼大牛 如果覺得有分享有毛病 歡迎指點出來...一起進步！！！
對了 差點忘記和你們說了 介面層 實現層 和資料層相信大家都會 沒有太大的區別 所以我就不一一放出來了 資料層我用的是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
//前端頁面需要引入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>
//看到資料成功
//前端頁面需要引入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>
//看到資料成功