springMVC处理Ajax请求

　　最近在做毕设，剩一些小功能没做，比如点赞、个人中心页面、一些修改功能、登录成功或失败的弹窗、注册成功后的提示信息；这么一说还挺多没做完的。不过还是点赞功能比较重要，毕竟后续有一个文章热榜功能需要根据近期的点赞数对文章进行排序。没有客户端的点赞功能，总不能自己去数据库了偷偷+1吧。

　　在我的系统里用了SSM，前端用的Thymeleaf不是jsp。在传参的过程中经常就不知道语法要怎么写。

 

　　在Thymeleaf里，要展示的值不是写在标签中间的如<button>${username}</button>而是<button th:text="${username}"></button>  这里就是我最头疼的问题，怎么让js获取到我的参数，如果能拿到问题马上能解决。

　　解决鸟。就是传参的问题。怎么在js中声明一个我已经有的变量？

 

　　1.在controller中用@Controller声明一个类为controller类

　　2.@RequestMapping注解接收请求

　　3.与数据库交互得到结果后，用Model将数据封装

　　4.在html页面中用${变量名}获取数据

　　5.在js中获取变量的声明格式为 var 变量名 = [[${变量名}]]　　//例： var debateID = [[${debateID}]],这个debateID得是通过Model或ModelAndView封装好传递过来的值

　　6.后续就是Ajax的问题了

　　附图说明：

　　

　　声明controller

 

 

　　

 

　　在页面初始化的时候我就封装了数据

<script th:inline="javascript">
        var nol = [[${nol}]];
        // var essayId = [[${essayId}]]
        const btn = document.getElementById("like");
        const xhr = new XMLHttpRequest();
        btn.addEventListener('click',function (){
            // console.log("123");
            xhr.open('POST','http://localhost:8080/DebateMIS/getNol?essayId='+ [[${essayId}]]);
            xhr.send();
            // console.log("sended");
            xhr.onreadystatechange = function (){
                if (xhr.readyState === 4){
                    // console.log("4");
                    // console.log(xhr.status);
                    if (xhr.status >= 200 && xhr.status <300){
                        nol = xhr.response;
                        console.log(nol);
                        btn.innerHTML=nol;
                    }
                }
            }
        })

    </script>

　　中间有些console是我还没解决传参问题时打的断点。

　　这个b功能终于实现了！！！

　　在编程的过程中经常遇到了要实现一个功能不知道怎么做的问题。或者像这样子，知道要往什么方向走，但是却因为对语法不熟悉做不出来。打好基础很重要啊。

---

　　04-24补充

　　调试系统的时候遇到了一件怪事啊，在我的系统里是有两篇文章的：

　　

 

　　我之前做功能测试的时候一直是用第一篇文章的，今天闲的，用第二篇文章测试一下功能，忽然发现点赞功能没有反应就是点赞了没有更新数据，数据库也没有更新数据，也没有报错。

　　很奇怪啊，重看了一遍代码，确认了代码是没有问题的。最后找到问题是数据库里。点赞数这个属性运行为null，而在我的点赞功能里sql是这样写的

　　<update> update essay set nul = nol+1 where essayid = #{essayId }</update>

　　我的理解是null+1还是null，或者null不能+1这样子，后续求证一下再更新。

---

06-17

  在后续的开发里我遇到一个问题，当我用同一个账号登录系统对同一篇文章进行点赞这个行为时我发现，当我点进文章页面点赞；保持在页面内再点赞，这时时不能点赞的；然而当我退出文章页面再进来之后诶，又能点赞了，我就这样给自己的文章刷了两百多个赞。这肯定是不能接受的。于是我回去看我的点赞功能的逻辑。我发现对于判断能不能点赞这个事，我交给了前端，设置了一个boolean flag，当点赞之后就改变flag，于是就不能再点赞了。

  但是！

  这个flag再加载前端资源的时候会被刷新重置。所以会出现能刷赞的情况。那这个逻辑还是得放在后台。简单说就是在数据库里新建一个表，当用户对文章点赞后，把文章编号和用户编号一起写进表里，这样就有了用户点赞了哪一篇文章的记录。考虑到最极端的情况下m个用户，n篇文章，会产生m*n条记录，我给这个表加上了联合索引。

  当然一开始有想用B+树做的，因为我的文章编号和用户编号都是数据库自增的int。我想是不是能够用文章编号做主键，也就是B+树的根节点，然后把用户编号存在叶子节点里。但是在数据结构方面的理解还不够我把这个想法实现

标签：功能,console,essayId,SpringMVC,点赞,xhr,Ajax,文章
来源： https://www.cnblogs.com/lunar-sailor/p/16138841.html