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

作者：繁依Fanyi0 | 2024-08-03 07:33:14

踩

要在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);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

前端：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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

说明

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

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/922048