AJAX、thymeleaf在springboot中的实战应用

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}]]

至此，本篇博客为大家讲解完毕。