前端学习笔记(2406261):jquery使用checkbox控制页面自动刷新

文章目录

    • 需求
      • 登录页面
      • 主页面
    • API
      • 用户登录login
      • 获取数据getdata
    • 代码
      • 登录页面
      • 主页面
    • 关于后端

需求

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

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

登录页面

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

主页面

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

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

主界面

API

系统一共有两个API,分别是:

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

用户登录login

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

获取数据getdata

登录成功后,使用getdata来获取数据,采用post请求,需要将token放在header中。body为json格式,可以传递fromto两个参数,其格式为yyyy-mm-dd hh:nn:ss,这两个参数不是必须的。
请求成功后,将返回数据包,包括codemsgdata,其中data是一个数组,包含了传感器的数据,分别是:temperaturepressurevoltagepositionswitchtime
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;const password = document.getElementById('password').value;if (!username || !password) {alert('用户名和密码不能为空');return;}const data = {username: username,password: password};fetch('/mgr/login', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify(data)}).then(response => response.json()).then(result => {if (result.code === 0) {document.cookie = 'token=' + result.token;window.location.href = '/main';} else {alert('登录失败,请检查用户名和密码');}}).catch(error => {console.error('Error:', error);});});</script>
</body>
</html>

主页面

页面使用了jquery,用checkbox来控制页面的刷新,主要的代码是:

$("#autoRefresh").click(function(){if ($("#autoRefresh").is(':checked')){interval_id = window.setInterval(queryData, 2000);}else{window.clearInterval(interval_id)}
})

可以使用is方法来判断checked来确定checkbox是否处于选中状态。

另外,通过window.setInterval的方法,可以设置一个定时器,实现数据的定时获取。

完整的代码如下:

<!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;}.centered {display: flex;justify-content: center;align-items: center;height: 100%;}table {border-collapse: collapse;width: 80%;margin: 0 auto;margin-top: 40px;}th, td {border: 1px solid #ccc;padding: 8px;text-align: center;}th {background-color: #333;}</style><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
</head>
<body><div class="centered"><label for="startTime">开始时间:</label>&nbsp<input type="datetime-local" id="startTime">&nbsp &nbsp<label for="endTime">结束时间:</label>&nbsp<input type="datetime-local" id="endTime">&nbsp &nbsp<input type="checkbox" id="autoRefresh" checked>自动刷新(2s)</input>&nbsp  &nbsp<button id="queryBtn">立即刷新</button></div><table id="resultTable"><thead><tr><th>序号</th><th>温度</th><th>压力</th><th>电压</th><th>位置</th><th>开关</th><th>时间</th></tr></thead><tbody></tbody></table><script>$(document).ready(function() {var token = getCookie("token");if (!token) {window.location.href = "/login";}$("#queryBtn").click(queryData);//使用定时器刷新var interval_id = setInterval(queryData, 2000);$("#autoRefresh").click(function(){if ($("#autoRefresh").is(':checked')){interval_id = window.setInterval(queryData, 2000);}else{window.clearInterval(interval_id)}})//初始化时刷新queryData();});function getCookie(name) {var value = "; " + document.cookie;var parts = value.split("; " + name + "=");if (parts.length == 2) return parts.pop().split(";").shift();}function queryData(){var startTime = $("#startTime").val();if (startTime && startTime.length>6){startTime = moment(startTime).format("YYYY-MM-DD HH:mm:ss");}var endTime = $("#endTime").val();if (endTime && endTime.length>6){endTime = moment(endTime).format("YYYY-MM-DD HH:mm:ss");}var data = {'from': startTime,'to': endTime};var token = getCookie("token");$.ajax({url: "/mgr/getdata",type: "POST",contentType: "application/json",data: JSON.stringify(data),headers: {"token": token},success: function(response) {if (response.code === 0) {displayData(response.data);} else if (response.code === 340) {window.location.href = "/login";} else {alert(response.msg);}},error: function() {alert("请求失败,请稍后重试");}});}function displayData(data) {var tableBody = $("#resultTable tbody");tableBody.empty();data.forEach(function(item, index) {var row = $("<tr></tr>");row.append($("<td></td>").text(index + 1));row.append($("<td></td>").text(item.temperature));row.append($("<td></td>").text(item.pressure));row.append($("<td></td>").text(item.voltage));row.append($("<td></td>").text(item.position));row.append($("<td></td>").text(item.switch ? "开" : "关"));row.append($("<td></td>").text(item.time));tableBody.append(row);});}</script>
</body>
</html>

关于后端

回头再写吧,估计也没人看,有需要的可以留言。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/37749.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

仓库管理系统19--盘存管理

原创不易&#xff0c;打字不易&#xff0c;截图不易&#xff0c;多多点赞&#xff0c;送人玫瑰&#xff0c;留有余香&#xff0c;财务自由明日实现 1、什么是盘存 盘存也叫盘库&#xff0c;盘库是指对一个仓库、库房或者商店的库存进行全面清点和核对的过程。在盘库过程中&am…

L03_Redis知识图谱

这些知识点你都掌握了吗?大家可以对着问题看下自己掌握程度如何?对于没掌握的知识点,大家自行网上搜索,都会有对应答案,本文不做知识点详细说明,只做简要文字或图示引导。 Redis 全景图 Redis 知识全景图都包括什么呢?简单来说,就是“两大维度,三大主线”。 Redis …

IDEA中导入Maven项目

IDEA中导入Maven项目 方式1&#xff1a;使用Maven面板&#xff0c;快速导入项目 打开IDEA&#xff0c;选择右侧Maven面板&#xff0c;点击 号&#xff0c;选中对应项目的pom.xml文件&#xff0c;双击即可 说明&#xff1a;如果没有Maven面板&#xff0c;选择 View > Appe…

qt 开发笔记 动态链接库应用

1.概要 1.1 需求 库有两种&#xff0c;动态库和静态库&#xff0c;这里说的是动态库&#xff1b;动态库的加载方式有两种&#xff0c;一直是静态的一种是动态的&#xff0c;这里的静态加载是指静态加载动态&#xff0c;是一种加载动态库的方式。也有一种动态加载的方式&#…

打造你的第一个STM32步进电机控制器:详细教程与实战技巧

1. 引言 步进电机因其精确的位置控制和较高的响应速度&#xff0c;在自动化设备、3D打印机、CNC机床等领域广泛应用。本文将详细介绍如何使用STM32微控制器来控制步进电机&#xff0c;从理论到实践&#xff0c;帮助读者全面掌握这一重要技术。 STM32系列微控制器以其强大的性…

探索LangChain-Chatchat 0.3:一体化Agent与强大RAG模型的全面入门指南

介绍 LangChain-Chatchat 支持RAG和Agent0.3版本跟大模型解耦,支持Xinference、Ollama、LocalAI、FastChat、One API,可以非常方便的切换各个模型,本文只是介绍XinferenceXorbits Inference (Xinference) 是一个开源平台&#xff0c;用于简化各种 AI 模型的运行和集成。借助 X…

数据结构速成--查找

由于是速成专题&#xff0c;因此内容不会十分全面&#xff0c;只会涵盖考试重点&#xff0c;各学校课程要求不同 &#xff0c;大家可以按照考纲复习&#xff0c;不全面的内容&#xff0c;可以看一下小编主页数据结构初阶的内容&#xff0c;找到对应专题详细学习一下。 目录 …

STM32CubeMx的学习记录系列(1) - 软件的下载与点灯

目录 因为最近要学STM32的嵌入式AI开发&#xff0c;但它于是基于STM32CubeMX开发的&#xff0c;就顺便把这个学了。 直接百度STM32CubeMX&#xff0c;到意法的官网去下载。下载过程就看这篇博客 https://blog.csdn.net/as480133937/article/details/98885316 点灯 选择芯片&…

ArtTS语言基础类库内容的学习(2.10.1)

上篇回顾&#xff1a; ArkTS开发系列之Web组件的学习&#xff08;2.9&#xff09; 本篇内容&#xff1a;ArtTS语言基础类库-异步同步并发内容的学习(2.10.1&#xff09; 一、知识储备 1. 异常并发 Promise和Async/await提供异步并发能力&#xff0c;是标准的JS异步语法 Pr…

亿发微商城:从社交流量到生意增量,拓客+变现双收益

亿发微商城提供私域经营必备的系统 、服务和技术支持等全套解决方案。省去开发成本&#xff0c;还原品牌调性&#xff0c;打通社交渠道&#xff0c;经营私域会员&#xff0c;带来传统电商和线下门店之外的生意增量。

揭秘Etched AI:三个哈佛辍学00后挑战英伟达,推出Transformer专用ASIC芯片sohu

人工智能领域最近掀起了一股新的热潮&#xff0c;三位哈佛辍学的00后本科生创建了Etched AI&#xff0c;并成功推出了一款超强AI芯片sohu&#xff0c;直指英伟达的AI芯片帝国。这款芯片被誉为比英伟达H100快20倍&#xff0c;吸引了众多科技界的关注。本文将深入探讨Etched AI及…

“实时数据大屏2k、4k、8k”这样做【高级前端必备技能之一】

&#x1f525;废话不多先上效果图 &#x1f525;划重点 新手程序员需要注意以下几点&#xff1a; 我们需要进行充分的技术调研&#xff0c;进行技术选型产品&#xff0c;UI&#xff0c;再三确认效果图是否确定&#xff0c;避免后续出现返工的情况 不能拿到效果图之后&#x…

【分布式计算框架 MapReduce】MapReduce 初级编程

目录 一、MapReduce 示例程序的导入并运行测试 二、准备 4 个小文件&#xff08;文件大小分别为 1.7M&#xff0c;5.1M&#xff0c;3.4M&#xff0c;6.8M&#xff09; 1. 第一种情况&#xff0c;默认分片&#xff1a;不修改程序代码&#xff0c;直接使用 WordCount 源程序 2…

电脑提示vcomp140.dll丢失的几种有效的解决方法,轻松搞定dll问题

在电脑使用过程中&#xff0c;我们可能会遇到一些错误提示&#xff0c;其中之一就是找不到vcomp140.dll。那么&#xff0c;究竟什么是vcomp140.dll呢&#xff1f;为什么会出现找不到vcomp140.dll的情况呢&#xff1f;本文将从vcomp140.dll的定义、常见原因、对电脑的影响以及解…

19.《C语言》——【如何理解static和extern?】

&#x1f387;开场语 亲爱的读者&#xff0c;大家好&#xff01;我是一名正在学习编程的高校生。在这个博客里&#xff0c;我将和大家一起探讨编程技巧、分享实用工具&#xff0c;并交流学习心得。希望通过我的博客&#xff0c;你能学到有用的知识&#xff0c;提高自己的技能&a…

解锁iCloud的全能潜力:从新手到专家的终极指南!

在今天这个数字化日益发达的时代&#xff0c;云服务已经成为我们生活中不可或缺的一部分。苹果公司的iCloud服务&#xff0c;作为一个集成的云服务平台&#xff0c;为用户提供了数据存储、备份、同步等多样化的功能。通过本文&#xff0c;我们将深入探讨如何高效利用iCloud&…

[单机版架设]新天堂2-死亡骑士338|带AI机器人

前言 今天给大家带来一款单机游戏的架设&#xff1a;新天堂2-死亡骑士338单机服务端—带AI机器人 如今市面上的资源参差不齐&#xff0c;大部分的都不能运行&#xff0c;本人亲自测试&#xff0c;运行视频如下&#xff1a; 新天堂2 搭建教程 此游戏架设不需要虚拟机&#xf…

识图生成代码:通义千问vsGPt4o,有点小崩

今日对比一下通义千问和GPt4o&#xff0c;在通过识别图片然后去生成前端代码 在当今ai的时代&#xff0c;通过ai去生成页面的代码可以很大的提高我们的开发效率下面是我们要求的生成的图片截图&#xff0c;这是掘金的榜单 效果对比 首先我们使用通义千问&#xff0c;让他去帮我…

Django 自定义过滤器

1&#xff0c;编写自定义过滤器并注册 创建目录 Test/app5/templatetags 分别创建文件 Test/app5/templatetags/__init__.py Test/app5/templatetags/myfilter.py 添加过滤器脚本 Test/app5/templatetags/myfilter.py from django import template register template.…

Python功能制作之使用streamlit做一个简单的WebUI

使用Streamlit创建WebUI 1. 什么是Streamlit Streamlit 是一个开源的Python库&#xff0c;用于快速创建美观的Web应用。 它适合数据科学家和机器学习工程师&#xff0c;因为它能够以最小的代码量将数据应用程序带到浏览器中。通过简单的Python脚本&#xff0c;可以创建交互式…