jQuery AJAX 點擊彈層顯示後台詳情數據的簡易實現

效果

列表點擊「詳情」彈出模態層，內容通過 AJAX 從後台獲取 HTML 片段填充。

前端代碼

<table id="tbUser">
  <tr><td><a href="detail.jsp?id=1" class="ajax-detail">查看詳情</a></td></tr>
</table>

<div id="layer" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); 
     width:400px; background:#fff; border:1px solid #ccc; padding:20px; z-index:999; box-shadow:0 0 10px rgba(0,0,0,.3);">
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$('#tbUser').on('click', 'a.ajax-detail', function(e) {
    e.preventDefault();
    $('#layer').load(this.href, function() {
        $('#layer').show();
    });
});
$(document).click(function(e) {
    if (!$(e.target).closest('#layer, .ajax-detail').length) $('#layer').hide();
});
</script>

後端 (detail.jsp)

只輸出片段 HTML，**不要**包含 `` 標簽：

<h3>會員信息</h3>
<p>姓名：${user.name}</p>
<p>報名項目：${user.items}</p>

進階

• 加載中提示：`
  載入中...
  `。
• 使用 Bootstrap Modal / Layer.js 替換手寫彈層。