如何从AJAX获取ID并跳转至对应Action页面

嘿，我来帮你搞定这个问题！其实核心就是把事件ID从AJAX返回的数据一路传递到弹窗的按钮点击逻辑里，咱们一步步拆解：

1. 确保AJAX返回数据包含事件ID #

首先得让你的后端接口在返回日历事件数据时，每个事件对象都带上唯一的id字段（比如数据库里的事件主键）。举个AJAX请求的例子：

// 获取日历事件的AJAX请求
$.ajax({
  url: '/your-backend-events-api',
  method: 'GET',
  success: function(eventsData) {
    // eventsData是包含多个事件的数组，每个事件需包含id、title、start等字段
    $('#calendar').fullCalendar('renderEvents', eventsData);
  }
});

后端返回的事件结构大概是这样：

[
  { "id": 101, "title": "团队周会", "start": "2024-05-21T10:00:00" },
  { "id": 102, "title": "客户拜访", "start": "2024-05-22T14:30:00" }
]

2. 在FullCalendar事件点击回调中获取ID #

FullCalendar提供了eventClick回调，当用户点击日历上的事件时会触发它，这里能直接拿到包含ID的事件对象。你可以在初始化日历的时候配置这个回调，用来弹出弹窗并暂存ID：

$('#calendar').fullCalendar({
  // 其他配置项（比如header、defaultView等）...
  eventClick: function(event) {
    // event对象里就有我们从AJAX拿到的id
    const targetEventId = event.id;
    
    // 假设你用Bootstrap模态框作为弹窗，把ID绑定到"查看详情"按钮上
    $('#view-details-btn').data('event-id', targetEventId);
    // 弹出弹窗
    $('#event-modal').modal('show');
  }
});

3. 绑定按钮点击事件，携带ID跳转Action #

接下来给弹窗里的"查看详情"按钮添加点击事件，取出之前存的ID，然后跳转对应的Action页面：

// 给查看详情按钮绑定点击事件
$('#view-details-btn').click(function() {
  // 取出绑定在按钮上的事件ID
  const eventId = $(this).data('event-id');
  // 跳转到你的Action接口，这里以Spring MVC为例，URL格式可根据你的框架调整
  window.location.href = `/event/details/${eventId}`;
});

替代方案：用HTML属性存ID #

如果你不想用jQuery的data()方法，也可以直接给按钮设置自定义属性：

<!-- 弹窗中的按钮 -->
<button id="view-details-btn" data-event-id="">查看详情</button>

然后在eventClick回调中更新属性值：

$('#view-details-btn').attr('data-event-id', event.id);

点击按钮时同样可以通过$(this).attr('data-event-id')获取ID。

总的来说，只要保证ID从AJAX返回、到FullCalendar事件对象、再到弹窗按钮这一路径是通的，就能轻松实现带ID跳转的功能啦！

内容的提问来源于stack exchange，提问作者Chloe Finn