前端学习笔记（2406261）：jquery使用checkbox控制页面自动刷新

原子星

已于 2024-06-26 15:29:56 修改

阅读量902

点赞数 8

CC 4.0 BY-SA版权

分类专栏：前端开发文章标签：前端学习笔记

于 2024-06-26 13:31:23 首次发布

本文链接：https://blog.youkuaiyun.com/superatom01/article/details/139986400

文章目录

需求

这是一个物联网的演示项目，web端能够实时显示后台数据的变化，其流程非常简单：

用户登录
登录成功后显示主界面面
主界面进入后自动显示数据
数据两秒钟自动刷新一次
设置日期和时间可以对数据进行筛选
勾选掉自动刷新后，停止自动刷新
点击刷新按钮可以强制刷新。

登录页面

登录页面可以输入用户名和密码，提交到服务端验证后，可以跳转到主界面。
登录界面

主页面

主界面的元素有：开始时间，结束时间，自动刷新开关，刷新按钮
表格的列有：序号、温度、压力、电压、位置、行程开关状态、数据上报的时间等。

说明数据均为模拟数据，而非实际数据。

主界面

API

系统一共有两个API，分别是：

login：用于用户登录
获取数据：获取设备数据

用户登录login

login方法采用post，发送用户名和密码，如果登录成功，返回的code为0，且附带一个token，后续请求需要将token放在header中。
login方法

获取数据getdata

登录成功后，使用getdata来获取数据，采用post请求，需要将token放在header中。body为json格式，可以传递from和to两个参数，其格式为yyyy-mm-dd hh:nn:ss，这两个参数不是必须的。
请求成功后，将返回数据包，包括code、msg和data，其中data是一个数组，包含了传感器的数据，分别是：temperature、pressure、voltage、position、switch、time。
getdata方法

代码

登录页面

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <style>
        body {
     
     
            background-color: #333;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        form {
     
     
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        input {
     
     
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <form id="loginForm" method="post">
        <input type="text" id="username" placeholder="用户名" required>
        <input type="password" id="password" placeholder="密码" required>
        <button type="submit">登录</button>
    </form>
    <script>
        document.getElementById('loginForm').addEventListener('submit', function(event) {
     
     
            event.preventDefault();
            const username = document.getElementById('username').value;