JS中按钮变色

最新推荐文章于 2023-04-14 11:36:00 发布

原创最新推荐文章于 2023-04-14 11:36:00 发布 · 2.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#js按钮变色

本文介绍了一个具体的前后端交互案例，通过前端页面的按钮操作来改变后端数据库中用户的启用或停用状态，并即时更新前端显示。文章详细展示了Thymeleaf模板语法与jQuery AJAX请求的应用，以及Spring MVC后台接口的设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果如图：

前端代码：

                    <td>
                        <a th:href="@{/catalog/kqUser/kqUserUpdateUI?id=}+${vkquser.kqId}"
                           class="btn btn-primary btn-xs">编辑</a>
                        
                        <a href="javascript:void(0)" class="btn btn-xs"
                           th:classappend="${vkquser.stop} eq 0 ? 'btn-danger ' : 'btn-success'"
                           th:onclick="'javascript:stop(\''+${vkquser.kqId}+'\',\''+${vkquser.stop}+'\')'"
                           th:if="${vkquser.stop == 1}" th:text="运行">运行</a>

                        <a href="javascript:void(0)" class="btn btn-xs"
                           th:classappend="${vkquser.stop} eq 0 ? 'btn-danger ' : 'btn-success'"
                           th:onclick="'javascript:stop(\''+${vkquser.kqId}+'\',\''+${vkquser.stop}+'\')'"
                           th:if="${vkquser.stop == 0}" th:text="停用">停用</a>

                    </td>

js：

<script>
        var _context_path = $("meta[name='_context_path']").attr("content");

        function stop(id, stop) {
            var stop = stop == 1 ? 0 : 1;
            $.ajax({
                url: '/catalog/kqUser/stop',
                data: {'kqId': id, 'stop': stop},
                dataType: 'json',
                type: 'post',
                success: function (result) {
                    if (result.code == 200)
                        page_back('/catalog/kqUser/kqUserListUI');
                    else
                        layer.msg(result.message);
                }
            });
        }
    </script>

后台：

@RequestMapping(value = "/stop")
    @ResponseBody
    public Result stop(Integer kqId , Integer stop){
        kqUserService.updateStop(kqId,stop);
        return ResultGenerator.genSuccessResult();
    }