点击单独加载关联JSON元素：LDAP组成员关联加载实现问询

我帮你梳理下实现思路，咱们把代码拆成两个核心部分：先加载组列表，点击组时再加载对应成员，同时给你补充分页加载组的思路。

第一步：重构组列表加载逻辑 #

首先修改初始的AJAX请求，只加载组的信息，并且把每个组做成可点击的元素，用data-dn属性存储组的唯一标识（LDAP里的DN），方便后续请求成员时使用：

$(function() {
  $('.group-submit').click(function(event) {
    event.preventDefault(); // 防止默认提交行为
    $.ajax({
      url: 'ldap/groups',
      method: 'GET',
      dataType: 'json',
      // 如果要分页，这里可以加page和size参数，比如：
      // data: { page: 1, size: 10 },
      success: function(data) {
        const $dropdown = $('#dropdown');
        $dropdown.empty(); // 清空之前的组列表（如果需要）
        
        $.each(data.entries, function(i, group) {
          // 创建可点击的组元素，用data-dn存组的DN
          const $groupItem = $('<span class="group-item" data-dn="' + group.dn + '">' + group.dn + '</span>');
          $groupItem.appendTo($dropdown);
        });
      }
    });
  });
});

第二步：实现点击组加载成员的逻辑 #

接下来给每个组元素绑定点击事件，点击时调用ldap/groups/members接口，传入当前组的DN，然后渲染成员列表：

// 放在上面的$(function() { ... })里面即可，用事件委托支持动态添加的组元素
$(function() {
  // 事件委托绑定，确保分页加载的组也能触发点击
  $('#dropdown').on('click', '.group-item', function() {
    const groupDn = $(this).data('dn'); // 获取当前组的DN
    const $userContainer = $('.ldap-users');
    
    // 可选：添加加载状态提示
    $userContainer.html('<span>加载中...</span>');
    
    $.ajax({
      url: 'ldap/groups/members',
      method: 'GET',
      dataType: 'json',
      data: { dn: groupDn }, // 这里假设接口接受dn参数传递组标识，根据实际接口调整
      success: function(memberData) {
        $userContainer.empty();
        // 假设memberData.entries是成员列表，根据实际返回结构调整
        if (memberData.entries && memberData.entries.length > 0) {
          $.each(memberData.entries, function(i, member) {
            const $memberItem = $('<a>' + member.dn + '</a>'); // 根据成员实际字段调整显示内容
            $memberItem.appendTo($userContainer);
          });
        } else {
          $userContainer.html('<span>该组暂无成员</span>');
        }
      },
      error: function() {
        $userContainer.html('<span>加载成员失败，请重试</span>');
      }
    });
  });
});

补充：分页加载组的实现思路 #

如果要实现组的分页加载，可以在初始请求中加入分页参数（比如page和size），然后添加一个“加载更多”按钮，点击时递增页码，继续请求并追加组列表：

// 初始化分页参数
let currentPage = 1;
const pageSize = 10;

$('.load-more-groups').click(function() {
  currentPage++;
  $.ajax({
    url: 'ldap/groups',
    method: 'GET',
    dataType: 'json',
    data: { page: currentPage, size: pageSize },
    success: function(data) {
      const $dropdown = $('#dropdown');
      $.each(data.entries, function(i, group) {
        const $groupItem = $('<span class="group-item" data-dn="' + group.dn + '">' + group.dn + '</span>');
        $groupItem.appendTo($dropdown);
      });
      // 如果没有更多组了，隐藏加载更多按钮
      if (data.entries.length < pageSize) {
        $('.load-more-groups').hide();
      }
    }
  });
});

关键注意点 #

• 确认ldap/groups/members接口的参数要求：比如是否需要用groupDn而不是dn作为参数名，根据实际接口文档调整。
• 事件委托的使用：因为分页加载的组元素是动态添加的，所以用$('#dropdown').on('click', '.group-item', ...)而不是直接给.group-item绑定事件，确保动态元素也能触发点击。
• 加载状态与错误处理：可以在请求时禁用组元素或加载更多按钮，避免重复点击，提升用户体验。

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