ssm+ajax怎么实现消息标记已读

最近需要实现一个功能，怎么实现消息标记已读。

我的做法：（是我自己想出来的点子，能成功实现，肯定有不足，但是水平有限，在此记录）

在数据库表加个sign字段，初始值为0或者空，整型。

1. 所有消息，一开始都是未读的，也就是sign为空或者默认为0；
2. 判断是否已读，未读，消息前面加个小圆点
3. 点击未读的消息所在div，触发ajax
4. ajax，先查该消息是否在数据库表的sign是0/null，如果为0/null，更新该消息的sign=1
5. 返回成功代码，如果执行成功，则把小圆点隐藏。

这是前端节目，前两条测试成功，已读，后两条未读。

jsp代码：

 <c:forEach items="${beAttentionLists}" var="beAttentionLists" varStatus="s">
                            <div id="id${beAttentionLists.id}">
                                <input  name="id" value="${beAttentionLists.id}">
                                <c:if test="${beAttentionLists.sign!=1}">
                                    <span class="layui-badge-dot layui-bg-orange" id="yuandian"></span>
                                </c:if>
                                <span class="layui-badge layui-bg-orange">粉丝</span><a
                                    href="myHomepage?userid=${beAttentionLists.userid}">${beAttentionLists.username}</a>
                                关注了我
                                时间：${beAttentionLists.time}
                                <a href="delBeAttenRecord?id=${beAttentionLists.id}" type="button"
                                   class="layui-btn layui-btn-primary layui-btn-sm" style="float: right"><i
                                        class="layui-icon"></i></a>
                            </div>
                            <hr>

把数据从数据库取出来遍历，取出的后台代码略。

<script>脚本：

$("input[name='id']").each(//把input的value遍历出来
        function(){
            let id=$(this).val();
            $("#id" +id).on("click", function ()//这个就是点击div触发
                $.ajax({
                    type: "Post",
                    url: "haveSeen/" + id,
                    contentType: "charset=utf-8",
                    dataType: "json",
                    success: function (result) {
                        if (result.resultCode == 200) {
                            $('#yuandian').hide();
                            alert("操作成功");
                        }
                    },
                    error: function (data) {
                        alert("已读操作--失败");
                    }
                });
            });
            // alert($(this).val());
        }
    )

这里用到的技巧，就是先在遍历消息里面放一个input，input的值就是遍历出来的div的name，这样就可以实现遍历出来的每条信息都能正确的被点到，也能取到消息id。这句话才是我最想记录的，怕以后忘记自己想出来的点子，记一下。

至于后台代码，我想百度等浏览器才是爸爸，在此不赘述。

还有显示多少条已读消息，全部标记为已读，这些功能也是只需要逻辑代码，没什么技巧性，难度不大，马上就做了。