全面解锁:通过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 来实现数据的响应式。…...
水泥电阻在电源电路中的作用
水泥电阻是将电阻线绕在无碱性耐热瓷件上,外面加上耐热、耐湿及耐腐蚀之材料保护固定并把绕线电阻体放入方形瓷器框内,用特殊不燃性耐热水泥充填密封而成。水泥电阻的外侧主要是陶瓷材质(一般可分为高铝瓷和长石瓷)。 水泥电阻器…...
uniapp 对接腾讯云IM群组成员管理(增删改查)
UniApp 实战:腾讯云IM群组成员管理(增删改查) 一、前言 在社交类App开发中,群组成员管理是核心功能之一。本文将基于UniApp框架,结合腾讯云IM SDK,详细讲解如何实现群组成员的增删改查全流程。 权限校验…...
Linux链表操作全解析
Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表?1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...
UE5 学习系列(三)创建和移动物体
这篇博客是该系列的第三篇,是在之前两篇博客的基础上展开,主要介绍如何在操作界面中创建和拖动物体,这篇博客跟随的视频链接如下: B 站视频:s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...
linux arm系统烧录
1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 (忘了有没有这步了 估计有) 刷机程序 和 镜像 就不提供了。要刷的时…...
Qwen3-Embedding-0.6B深度解析:多语言语义检索的轻量级利器
第一章 引言:语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域,文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量,支撑着搜索引擎、推荐系统、…...
Keil 中设置 STM32 Flash 和 RAM 地址详解
文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面(Target 选项卡)1. IROM1(用于配置 Flash)2. IRAM1(用于配置 RAM)二、链接器设置界面(Linker 选项卡)1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数(如果没有勾选上面…...
【AI学习】三、AI算法中的向量
在人工智能(AI)算法中,向量(Vector)是一种将现实世界中的数据(如图像、文本、音频等)转化为计算机可处理的数值型特征表示的工具。它是连接人类认知(如语义、视觉特征)与…...
Robots.txt 文件
什么是robots.txt? robots.txt 是一个位于网站根目录下的文本文件(如:https://example.com/robots.txt),它用于指导网络爬虫(如搜索引擎的蜘蛛程序)如何抓取该网站的内容。这个文件遵循 Robots…...
dify打造数据可视化图表
一、概述 在日常工作和学习中,我们经常需要和数据打交道。无论是分析报告、项目展示,还是简单的数据洞察,一个清晰直观的图表,往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server,由蚂蚁集团 AntV 团队…...
今日学习:Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存
文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...
