基于JQuery的Ajax请求：点击GET渲染数据后POST存库的ID获取方案

其实你的顾虑很正常，但把数据库ID合理地存在页面元素里是前端开发中非常常见且安全的做法——只要遵循规范并做好后端校验就行。下面是几种最佳实现方案，按推荐程度排序：

1. HTML5 data-* 属性 + 事件委托（最推荐） #

HTML5的自定义data-*属性就是为这种场景设计的：它允许你在元素上存储自定义数据，既符合W3C规范，又能通过JS轻松读取，完全不会破坏页面结构。

实现步骤： #

• 渲染数据时：把数据库ID绑定到元素的data-id属性上

  // 假设你通过AJAX获取到的数组是dataList
  const $container = $('#data-container');
  dataList.forEach(item => {
    // 用模板字符串拼接元素，把ID存入data-id
    const itemHtml = `<div class="data-item" data-id="${item.id}">${item.content}</div>`;
    $container.append(itemHtml);
  });
  

• 绑定点击事件：因为是动态生成的元素，直接绑定事件会失效，所以用事件委托（把事件绑定到静态的父容器上）

  // 父容器是页面加载时就存在的静态元素
  $('#data-container').on('click', '.data-item', function() {
    // 读取data-id属性的值
    const targetId = $(this).data('id');
    
    // 发起POST请求存入关联实体
    $.ajax({
      url: '/api/associate-entity',
      method: 'POST',
      contentType: 'application/json',
      data: JSON.stringify({
        sourceId: targetId,
        // 这里传入关联实体的必要参数，比如关联目标ID、当前用户ID等
        relatedEntityId: 456
      }),
      success: (res) => {
        console.log('关联存储成功', res);
        // 可以做UI反馈，比如标记已处理
        $(this).addClass('is-associated');
      },
      error: (xhr) => {
        console.error('存储失败', xhr.responseText);
      }
    });
  });
  

2. 隐藏输入框存储ID（适合复杂参数场景） #

如果需要同时存储多个关联参数，或者你对data-*属性有特殊顾虑，可以在每个动态元素里嵌入隐藏的input标签：

// 渲染时的代码
const itemHtml = `
  <div class="data-item">
    ${item.content}
    <input type="hidden" class="item-id" value="${item.id}">
    <input type="hidden" class="related-param" value="${item.relatedParam}">
  </div>
`;

点击时读取：

$('#data-container').on('click', '.data-item', function() {
  const targetId = $(this).find('.item-id').val();
  const relatedParam = $(this).find('.related-param').val();
  // 后续POST请求逻辑同上
});

3. 关键安全注意事项 #

不管用哪种方式，后端的权限校验才是核心安全屏障：

• 不能仅依赖前端传入的ID就执行存储操作，要验证当前用户是否有权限操作该数据和关联实体
• 如果ID是敏感数据（比如用户隐私ID），可以在前端传入加密后的ID，后端解密后再处理（普通资源ID无需此操作）

内容的提问来源于stack exchange，提问作者Zeyukan Ich'