全面解锁:通过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 来实现数据的响应式。…...
水泥电阻在电源电路中的作用
水泥电阻是将电阻线绕在无碱性耐热瓷件上,外面加上耐热、耐湿及耐腐蚀之材料保护固定并把绕线电阻体放入方形瓷器框内,用特殊不燃性耐热水泥充填密封而成。水泥电阻的外侧主要是陶瓷材质(一般可分为高铝瓷和长石瓷)。 水泥电阻器…...
Qt Http Server模块功能及架构
Qt Http Server 是 Qt 6.0 中引入的一个新模块,它提供了一个轻量级的 HTTP 服务器实现,主要用于构建基于 HTTP 的应用程序和服务。 功能介绍: 主要功能 HTTP服务器功能: 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...
【2025年】解决Burpsuite抓不到https包的问题
环境:windows11 burpsuite:2025.5 在抓取https网站时,burpsuite抓取不到https数据包,只显示: 解决该问题只需如下三个步骤: 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...
论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一)
宇树机器人多姿态起立控制强化学习框架论文解析 论文解读:交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一) 论文解读:交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...
三体问题详解
从物理学角度,三体问题之所以不稳定,是因为三个天体在万有引力作用下相互作用,形成一个非线性耦合系统。我们可以从牛顿经典力学出发,列出具体的运动方程,并说明为何这个系统本质上是混沌的,无法得到一般解…...
【C语言练习】080. 使用C语言实现简单的数据库操作
080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码:使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出:5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...
工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配
AI3D视觉的工业赋能者 迁移科技成立于2017年,作为行业领先的3D工业相机及视觉系统供应商,累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成,通过稳定、易用、高回报的AI3D视觉系统,为汽车、新能源、金属制造等行…...
k8s业务程序联调工具-KtConnect
概述 原理 工具作用是建立了一个从本地到集群的单向VPN,根据VPN原理,打通两个内网必然需要借助一个公共中继节点,ktconnect工具巧妙的利用k8s原生的portforward能力,简化了建立连接的过程,apiserver间接起到了中继节…...
css3笔记 (1) 自用
outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size:0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格ÿ…...
无人机侦测与反制技术的进展与应用
国家电网无人机侦测与反制技术的进展与应用 引言 随着无人机(无人驾驶飞行器,UAV)技术的快速发展,其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统,无人机的“黑飞”&…...
Vite中定义@软链接
在webpack中可以直接通过符号表示src路径,但是vite中默认不可以。 如何实现: vite中提供了resolve.alias:通过别名在指向一个具体的路径 在vite.config.js中 import { join } from pathexport default defineConfig({plugins: [vue()],//…...
