全面解锁：通过JSP和Ajax实现钉钉签到数据展示及部门筛选功能

news2024/9/9 6:27:20

要在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部分：
- GetDingSignInData Servlet接收前端发送的请求，调用钉钉签到API，并将结果返回给前端。
- access_token需要通过钉钉开放平台获取。
JSP页面部分：
- 通过表单输入部门ID，并点击按钮发送Ajax请求到Servlet。
- 成功获取签到数据后，使用JavaScript将数据展示在表格中。

这个示例提供了一个基本的实现方法，可以根据具体需求进行扩展和优化。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！