ajax是个很重要的东西,本篇为大家讲解如何在springboot中使用ajax
本篇主要是一个添加套餐到购物车的一个实战演练
这里前台先使用jQuery来获取到相应的值,封装成一个对象
AJAX
<script th:inline="javascript">
$(function () {
$("#addShopping").click(function () {
let shopCart={
"shoppingcartName":[[${package.packageName}]],
"shoppingcartPlace":$(".true1:first:first").text(),
"shoppingcartType":$(".packageType").find(".check:first:first").text(),
"shoppingcartPrice":[[${package.packagePrice}]],
"shoppingcartCount":$(".gods-counter-text:text").val(),
"shoppingcartImg":[[${package.img.imgAdd}]],
"shoppingcartHotelname":[[${package.hotel.hotelName}]],
"tbUserUserTel":$("#tel").val()
}
ajax的使用
$.ajax({
url:"addShopping",
type:"POST",
dataType:"json",
contentType:"application/json",
data:JSON.stringify(shopCart),
success:function (data){
console.log(data);
if(data.tbUserUserTel!=null){
$("#shopCartmsg").css("color","red").text("添加购物车成功");
setTimeout(function (){
$("#shopCartmsg").css("color","red").text("");
},1500)
}else {
$("#shopCartmsg").css("color","red").text("请先登录再操作");
setTimeout(function (){
$("#shopCartmsg").css("color","red").text("");
},1500)
}
}
})
这里是后台代码
@ResponseBody
@RequestMapping("addShopping")
public Shoppingcart addShopping(@RequestBody Shoppingcart shopCart,HttpSession session) {
User user = (User) session.getAttribute("user");
if(user!=null){
LocalDateTime localDateTime=LocalDateTime.now();
DateTimeFormatter dateTimeFormatter=DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss");
String time = localDateTime.format(dateTimeFormatter);
shopCart.setShoppingcartTime(time);
String id = UUID.randomUUID().toString().replace("-", "");
shopCart.setShoppingcartId(id);
shopCart.setTbUserUserTel(user.getUserTel());
shoppingcartService.addShop(shopCart);
return shopCart;
}else {
return shopCart;
}
}
注意要在方法上添加@ResponseBody注解,在接收对象的属性前加上一个@RequestBody注解,否则接收不了前台的json格式,注意前后台的字段一定要匹配好,前台的名字要与实体类的字段一致,否则会报错说不认识
在接收json格式对象的方法参数尽量不要有其他多余的参数,否则前台对应不上后台的方法参数也可能出问题
回调时要注意要返回一个封装的对象,因为前台是json格式,后台回调的时候要使用对象传过去进行回调,不能像之前demo时回调一个字符串等数据,否则前台接收不到回调data
至此,ajax需要注意的点说完了,再来说说thymeleaf。
Thymeleaf
thymeleaf是一个前端模板,能够在springboot中简单的获取到后端的数据,具体用法可以参考官网,基本就是要在需要获取的标签上加上th:再加上相应的标签
这里要说的是在script上使用thymeleaf
首先要在声明的时候告诉script要使用thymeleaf了。
<script th:inline="javascript">
像这样
在script中获取后端数据的语法格式是[[${}]],例如
[[${package.packageName}]]
至此,本篇博客为大家讲解完毕。