onclick事件怎么运用

田田 • • 问答

在创建一个button按钮，怎么才能让他绑定数据库，根据数据库状态而改变（按钮为打开的时候，数据库状态为0，按钮为打开状态，数据库状态为1，按钮为关闭状态）

回答

思路很简单：
打开-0；关闭-1

在按钮上注册点击事件监听器
监听器向服务端发送ajax请求，告知按钮当前的开关状态
服务端接收到请求后，判断按钮当前的开关状态，若当前为“打开”，则将“关闭”的状态值 1 存入数据库，之后再将按钮要改变成的状态值及显示文本（数据格式类似：{"switchStatus":1,"content":"关闭"}）输出给客户端即可。
客户端接收到服务端响应的数据后，就可以赋值给按钮了。
具体示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://q.cnblogs.com/q/140012/js/jquery-3.5.1.js">

    </script>
    <script>
        $(function () {
            // 给id为bt的元素注册点击事件监听器
            $("#switchBt").click(function () {
                // 通过jQuery以get方式发送ajax请求
                $.get(
                    "switch.do",
                    {"switchStatus": $("#switchBt").val()},
                    // 请求成功会回调这个函数
                    function (data, desc) {
                        $("#switchBt").text(data.content);
                        $("#switchBt").val(data.switchStatus);
                    },
                    "json"
                );
            });
        });
    </script>
</head>
<body>
<button name="switchStatus" value="0">打开</button>
</body>
</html>

后端业务处理代码：

 req.setCharacterEncoding("utf-8");
      resp.setContentType("text/json;charset=utf-8");
      PrintWriter out = resp.getWriter();
      int status = Integer.parseInt(req.getParameter("switchStatus"));
      System.out.println("当前开关的状态值：" + status);
      if (status == 0) {
        // 这里你只要访问数据库存储开关的状态值即可，我这里就省略这步，直接输出到页面上
        out.println("{\"switchStatus\":1,\"content\":\"关闭\"}");
        out.close();
      } else {
        out.println("{\"switchStatus\":0,\"content\":\"打开\"}");
        out.close();
      }
以上是onclick事件怎么运用的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>