Bootstrap Modal AJAX 載入：URL 參數丟失問題，改用 data-* 屬性或 JS 組裝 href

點擊連結以 AJAX 方式載入內容至 Modal，原始碼 <a href="show.html?id=..."> 直接寫死參數，但 $("#hidden").val() 在靜態 HTML 渲染時為空，導致參數遺失。

解決方案一：事件中動態組裝 href

<a href="show.html" id="knowshare" class="STYLE9" target="f4">知識分享</a>
<script>
$('#knowshare').click(function(e) {
    e.preventDefault();
    var id = $('#hidden').val();
    var url = 'show.html?id=' + encodeURIComponent(id);
    // 以 AJAX 載入並注入 Modal
    $('#modalBody').load(url, function() { $('#myModal').modal('show'); });
});
</script>

解決方案二：data-* 屬性傳參

<a href="#" data-url="show.html" data-id-key="hidden" class="ajax-modal">知識分享</a>
<script>
$('.ajax-modal').click(function(e) {
    e.preventDefault();
    var base = $(this).data('url');
    var key = $(this).data('id-key');
    var val = $('#' + key).val();
    $('#modalBody').load(base + '?id=' + encodeURIComponent(val), () => $('#myModal').modal('show'));
});
</script>

核心觀念

• **靜態 href 無法反映動態表單值**，必須在 click 事件中即時讀取並組裝 URL。
• 使用 e.preventDefault() 阻止預設跳轉，改由 AJAX 控制載入流程。
• encodeURIComponent 確保參數安全傳輸。

掌握「事件時讀值、動態組 URL、AJAX 注入」模式，即可解決所有 Modal 參數傳遞問題。