如何通过GET API提交考勤经纬度、日期及打卡时间？附交互方案

核心逻辑 #

用户首次点击按钮时触发签到请求，成功后切换按钮文本为「签退」；再次点击时触发签退请求，完成考勤流程。每次请求都要携带当前设备的经纬度、当日日期，以及对应时段的时间（签到传上班时间，签退传下班时间）。

具体实现步骤 #

1. 获取必要数据 #

• 经纬度：调用设备定位能力（比如移动端的系统定位API、前端的navigator.geolocation）获取实时纬度(lat)和经度(lng)。
• 日期：获取当前系统日期，统一格式为YYYY-MM-DD（例：2023-11-30）。
• 时间：获取当前系统时间，统一格式为HH:MM（例：11:00），签到时作为in_time，签退时作为out_time。
• 用户ID：API路径中的2是用户标识，需替换为当前登录用户的实际ID。

2. 按钮状态管理 #

• 初始按钮文本设为「签到」，用一个状态变量（比如isSignedIn）标记是否已签到，初始值为false。
• 点击按钮时：
  • 若isSignedIn为false，执行签到流程；
  • 若isSignedIn为true，执行签退流程。

3. 调用GET API请求 #

签到请求示例

拼接实际参数生成请求URL：

http://localhost/school/api/in-attendance/{用户ID}?date={当前日期}&in_time={当前时间}&lat={纬度}&lng={经度}

请求成功后：

• 按钮文本改为「签退」；
• 更新isSignedIn为true；
• 弹出提示「签到成功」。

签退请求示例

拼接实际参数生成请求URL：

http://localhost/school/api/out-attendance/{用户ID}?date={当前日期}&out_time={当前时间}&lat={纬度}&lng={经度}

请求成功后：

• 可将按钮改回「签到」或设为不可点击状态；
• 更新isSignedIn为false；
• 弹出提示「签退成功」。

4. 异常处理 #

• 定位失败时，提示「无法获取当前位置，请检查定位权限」；
• API请求失败（网络错误、服务器返回错误码）时，提示「考勤失败，请稍后重试」；
• 提前校验定位权限，无权限时引导用户开启。

代码示例（以JavaScript前端为例） #

// 初始化状态
let isSignedIn = false;
const attendanceBtn = document.getElementById('attendance-btn');

// 获取当前经纬度
function getCurrentLocation() {
  return new Promise((resolve, reject) => {
    if (!navigator.geolocation) {
      reject('当前设备不支持定位');
      return;
    }
    navigator.geolocation.getCurrentPosition(
      (position) => {
        resolve({
          lat: position.coords.latitude,
          lng: position.coords.longitude
        });
      },
      (error) => {
        reject('获取位置失败：' + error.message);
      }
    );
  });
}

// 格式化日期为YYYY-MM-DD
function getFormattedDate() {
  const date = new Date();
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}

// 格式化时间为HH:MM
function getFormattedTime() {
  const date = new Date();
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  return `${hours}:${minutes}`;
}

// 发送GET请求
async function sendAttendanceRequest(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) throw new Error('请求失败');
    return await response.json();
  } catch (error) {
    throw error;
  }
}

// 按钮点击事件
attendanceBtn.addEventListener('click', async () => {
  try {
    // 获取必要数据
    const location = await getCurrentLocation();
    const userId = '2'; // 替换为实际用户ID
    const date = getFormattedDate();
    const time = getFormattedTime();
    let apiUrl, successMsg;

    // 判断执行签到/签退
    if (!isSignedIn) {
      apiUrl = `http://localhost/school/api/in-attendance/${userId}?date=${date}&in_time=${time}&lat=${location.lat}&lng=${location.lng}`;
      successMsg = '签到成功';
    } else {
      apiUrl = `http://localhost/school/api/out-attendance/${userId}?date=${date}&out_time=${time}&lat=${location.lat}&lng=${location.lng}`;
      successMsg = '签退成功';
    }

    // 发送请求并更新状态
    await sendAttendanceRequest(apiUrl);
    alert(successMsg);
    isSignedIn = !isSignedIn;
    attendanceBtn.textContent = isSignedIn ? '签退' : '签到';
  } catch (error) {
    alert(error.message);
  }
});

注意事项 #

• 不要硬写用户ID，需替换为当前登录用户的真实标识；
• 严格遵循API要求的日期、时间格式，避免参数错误；
• 生产环境建议使用HTTPS协议，保障数据传输安全；
• 可添加按钮防重复点击逻辑（比如请求未完成时禁用按钮）。

内容的提问来源于stack exchange，提问作者joseph jo