全面解锁:通过JSP和Ajax实现钉钉签到数据展示及部门筛选功能
要在JSP页面中调用钉钉的签到接口,并将签到数据展示在页面上,同时提供部门筛选功能,你可以按照以下步骤操作:
-
准备钉钉API:
- 你需要首先获取钉钉开放平台的API凭证(如access_token)。请参考钉钉开放平台的文档来获取这些信息:钉钉开发者文档
-
后端代码:调用钉钉API:
- 在你的JSP项目的后端,通过一个Servlet来调用钉钉的签到接口,并将数据返回给前端页面。
-
前端代码:展示签到数据:
- 使用HTML和Ajax来调用后端的Servlet,获取签到数据并展示在页面上,同时提供部门筛选功能。
以下是一个完整的示例:
后端:Servlet代码
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.OutputStream;
import java.net.HttpURLConnection;
import java.net.URL;
import java.util.Scanner;@WebServlet("/GetDingSignInData")
public class GetDingSignInData extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String accessToken = "YOUR_ACCESS_TOKEN";String departmentId = request.getParameter("departmentId");String apiUrl = "https://oapi.dingtalk.com/attendance/list?access_token=" + accessToken;URL url = new URL(apiUrl);HttpURLConnection conn = (HttpURLConnection) url.openConnection();conn.setRequestMethod("POST");conn.setRequestProperty("Content-Type", "application/json");conn.setDoOutput(true);String jsonInputString = "{\"department_id\": \"" + departmentId + "\"}";try(OutputStream os = conn.getOutputStream()) {byte[] input = jsonInputString.getBytes("utf-8");os.write(input, 0, input.length); }int status = conn.getResponseCode();Scanner scanner;if (status > 299) {scanner = new Scanner(conn.getErrorStream());} else {scanner = new Scanner(conn.getInputStream());}StringBuilder jsonResponse = new StringBuilder();while (scanner.hasNext()) {jsonResponse.append(scanner.nextLine());}scanner.close();response.setContentType("application/json");response.getWriter().write(jsonResponse.toString());}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doPost(request, response);}
}
前端:JSP页面代码
<!DOCTYPE html>
<html>
<head><title>钉钉签到数据</title><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script type="text/javascript">function fetchSignInData() {var departmentId = $('#departmentId').val();$.ajax({url: 'GetDingSignInData',type: 'POST',data: { departmentId: departmentId },success: function(response) {var signInData = JSON.parse(response);var html = '<table border="1"><tr><th>姓名</th><th>签到时间</th><th>签到地点</th></tr>';$.each(signInData.recordresult, function(index, record) {html += '<tr>';html += '<td>' + record.user_name + '</td>';html += '<td>' + record.user_check_time + '</td>';html += '<td>' + record.user_check_location + '</td>';html += '</tr>';});html += '</table>';$('#signInData').html(html);},error: function(error) {console.log("Error: ", error);}});}</script>
</head>
<body><h1>钉钉签到数据</h1><div><label for="departmentId">部门ID: </label><input type="text" id="departmentId" name="departmentId"><button οnclick="fetchSignInData()">查询</button></div><div id="signInData"></div>
</body>
</html>
说明
-
Servlet部分:
GetDingSignInDataServlet接收前端发送的请求,调用钉钉签到API,并将结果返回给前端。access_token需要通过钉钉开放平台获取。
-
JSP页面部分:
- 通过表单输入部门ID,并点击按钮发送Ajax请求到Servlet。
- 成功获取签到数据后,使用JavaScript将数据展示在表格中。
这个示例提供了一个基本的实现方法,可以根据具体需求进行扩展和优化。
相关文章:
全面解锁:通过JSP和Ajax实现钉钉签到数据展示及部门筛选功能
要在JSP页面中调用钉钉的签到接口,并将签到数据展示在页面上,同时提供部门筛选功能,你可以按照以下步骤操作: 准备钉钉API: 你需要首先获取钉钉开放平台的API凭证(如access_token)。请参考钉钉开…...
LLM应用-prompt提示:让大模型总结生成PPT
参考: https://mp.weixin.qq.com/s/frKOjf4hb6yec8LzSmvQ7A 思路:通过大模型生成markdown内容,通过markdown去生成PPT 技术:Marp(https://marp.app/)这里用的这个工具进行markdown转PPT 1、让大模型生成Ma…...
安全防护软件的必要性:从微软蓝屏事件谈起
最近微软遭遇了的大规模蓝屏事件,让全球很多用户措手不及。这次事件告诉我们,保护我们的电脑和数据,安全防护软件是多么重要。 微软蓝屏事件源于网络安全公司CrowdStrike的技术更新错误,导致全球范围内大量Windows用户系统崩溃&a…...
解开基于大模型的Text2SQL的神秘面纱
你好,我是 shengjk1,多年大厂经验,努力构建 通俗易懂的、好玩的编程语言教程。 欢迎关注!你会有如下收益: 了解大厂经验拥有和大厂相匹配的技术等 希望看什么,评论或者私信告诉我! 文章目录 一…...
对象转化成base64-再转回对象
title: 对象转化成base64,再转回对象 date: 2024-08-01 17:54:02 tags: vue3 对象转为base64 /** 将本地对象转为base64 */ function toBase(str) {// 将对象转换为JSON字符串const jsonString JSON.stringify(str);// 使用encodeURIComponent将JSON字符串转换为UTF-8的百分…...
vue运行或打包报错 “‘node --max-old-space-size=10240“‘ 不是内部或外部命令
"node --max-old-space-size10240" 不是内部或外部命令,也不是可运行的程序 解决办法: 在 node_modules 文件夹搜索 "%_prog%" 替换成 %_prog% (即去掉双引号)...
反爬虫限制:有哪些方法可以保护网络爬虫不被限制?
目前,爬虫已经成为互联网数据获取最主流的方式。但为了保证爬虫顺利采集数据,需要防范网站的反爬虫机制,降低IP被限制的风险,这样才能提高爬虫工作的效率。那么,如何防止网络爬虫被限制呢?下面介绍几种有效…...
『 Linux 』基于阻塞队列的生产者消费者模型
文章目录 生产者-消费者模型概述生产者消费者模型的高效性虚假唤醒信号丢失生产者消费者模型的模拟实现参考代码 生产者-消费者模型概述 生产者消费者模型是一种多线程设计模式,常见于解决多个生产者线程和多个消费者线程之间如何安全有效地共享数据; 该模型中存在三种关系,两个…...
vite+typescript项目 报错:找不到模块“./*.vue”或其相应的类型声明——解决方案
declare module *.vue {import type { DefineComponent } from vueconst vueComponent: DefineComponent<{}, {}, any>export default vueComponent }...
连锁企业组网的优化解决方案
对于连锁企业来说,建立高效的网络组网很重要,因为它直接影响到各分支机构之间的信息共享、管理效率和业务流程的顺畅。一个理想的解决方案需要从多个角度入手,以确保网络的稳定性、安全性和可扩展性。 首先,需要选择合适的网络拓扑…...
网络通信---UDP
前两天做了个mplayer项目,今日继续学习 网络内容十分重要!!! 1.OSI七层模型 应用层:要传输的数据信息,如文件传输,电子邮件等(最接近用户,看传输的内容类型到底是什么) …...
从零开始学习网络安全渗透测试之基础入门篇——(四)反弹SHELL不回显带外正反向连接防火墙出入站文件上传下载
一、反弹SHELL 反弹SHELL(Reverse Shell)是一种网络攻击技术,它允许攻击者在一个被入侵的计算机上执行命令,即使该计算机位于防火墙或NAT(网络地址转换)之后。通常,当攻击者无法直接连接到目标…...
Nginx(1)
文章目录 概述基本的HTTP服务器功能其他 HTTP 服务器功能邮件代理服务器功能TCP/UDP代理服务器功能架构和可扩展性 Nginx特性web服务器负载均衡邮件代理服务器 小结 概述 Nginx是http和反向代理服务器,邮件代理服务器,以及lgor Sysoev最初编写的通用TCP…...
C# 构建观测者模式(或者为订阅者模型)
前言: 观测者模型的基本理念,就是,我有一个公共的事件,定义好他的事件的触发、数据接口。然后,通过增加订阅者(实例)来订阅这个事件的,或者说观察这个事件。如果事件发生࿰…...
MyBatis入门如何使用操作数据库及常见错误(yml配置)
一,什么是MyBatis 是一款优秀的持久层框架,用于简化jdbc的开发 持久层:指的就是持久化操作的层,通常也就是数据访问层(dao),也就是用来操作数据库。 也就是MyBatis是让你更加简单完成程序与数…...
大数据信用查询什么样的平台比较靠谱?
随着互联网的发展和普及,大数据技术逐渐应用到各行各业中,其中之一就是信用查询领域,大数据信用查询平台能够为用户提供全面、准确的大数据信用评估,然而,由于市场上出现了许多不同的大数据信用查询平台,我…...
后端程序员常犯的错误-本地缓存相关bug和技术思考
1 springboot集成本地缓存基本常识: SpringBoot集成本地缓存性能之王Caffeine示例详解 SpringBoot 缓存之 Cacheable介绍 2 线上问题 2.1 发现过程 接口内的rpc调用报错,error级别的日志被监控平台报警。 2.2 故障排查 2.2.1 代码 Cacheable(cach…...
【收集表单数据】
07 【收集表单数据】 在 React 里,HTML 表单元素的工作方式和其他的 DOM 元素有些不同,这是因为表单元素通常会保持一些内部的 state。例如这个纯 HTML 表单只接受一个名称: <form><label>名字:<input type"text"…...
【前端面试】九、框架
目录 1 Vue2 实现方式 2 Vue3 实现方式 3 React 实现方式 4 Angular 实现方式 1 Vue2 实现方式 Vue2 是目前仍被广泛使用的前端框架之一,其特点包括响应式数据绑定、组件化开发等。 响应式系统:Vue2 使用 Object.defineProperty 来实现数据的响应式。…...
水泥电阻在电源电路中的作用
水泥电阻是将电阻线绕在无碱性耐热瓷件上,外面加上耐热、耐湿及耐腐蚀之材料保护固定并把绕线电阻体放入方形瓷器框内,用特殊不燃性耐热水泥充填密封而成。水泥电阻的外侧主要是陶瓷材质(一般可分为高铝瓷和长石瓷)。 水泥电阻器…...
【网络】每天掌握一个Linux命令 - iftop
在Linux系统中,iftop是网络管理的得力助手,能实时监控网络流量、连接情况等,帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...
智慧医疗能源事业线深度画像分析(上)
引言 医疗行业作为现代社会的关键基础设施,其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入,智慧医疗能源事业线应运而生,致力于通过创新技术与管理方案,重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...
云计算——弹性云计算器(ECS)
弹性云服务器:ECS 概述 云计算重构了ICT系统,云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台,包含如下主要概念。 ECS(Elastic Cloud Server):即弹性云服务器,是云计算…...
安宝特方案丨XRSOP人员作业标准化管理平台:AR智慧点检验收套件
在选煤厂、化工厂、钢铁厂等过程生产型企业,其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进,需提前预防假检、错检、漏检,推动智慧生产运维系统数据的流动和现场赋能应用。同时,…...
线程与协程
1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指:像函数调用/返回一样轻量地完成任务切换。 举例说明: 当你在程序中写一个函数调用: funcA() 然后 funcA 执行完后返回&…...
dedecms 织梦自定义表单留言增加ajax验证码功能
增加ajax功能模块,用户不点击提交按钮,只要输入框失去焦点,就会提前提示验证码是否正确。 一,模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...
使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装
以下是基于 vant-ui(适配 Vue2 版本 )实现截图中照片上传预览、删除功能,并封装成可复用组件的完整代码,包含样式和逻辑实现,可直接在 Vue2 项目中使用: 1. 封装的图片上传组件 ImageUploader.vue <te…...
从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)
设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile,新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...
Aspose.PDF 限制绕过方案:Java 字节码技术实战分享(仅供学习)
Aspose.PDF 限制绕过方案:Java 字节码技术实战分享(仅供学习) 一、Aspose.PDF 简介二、说明(⚠️仅供学习与研究使用)三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...
安全突围:重塑内生安全体系:齐向东在2025年BCS大会的演讲
文章目录 前言第一部分:体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分:体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...
