Javascript 如何重构php href链接以使用Modal或popover响应

我正在重写一些文本，其中有大量的脚注

<a id="par170_fn1" href="get_footnote.php?id=118">[1]</a>

脚注组织在一个表格中

我对使用模态对话框或弹出窗口执行这些重构的技术流程有点困惑。似乎Ajax天生就是这个过程的一部分

我对匹配动态数据的概念有点执着

这个来自的示例通常是有意义的，但是我缺少了一个桥，它允许在调用中说明检索到的数据。 另外，我不想用按钮替换链接

<div class="modal-body">
  <h5>Popover in a modal</h5>
  <p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
  <hr>
  <h5>Tooltips in a modal</h5>
  <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>

莫代尔的爆米花
这会在单击时触发弹出窗口


模式中的工具提示
并在悬停时显示工具提示

---

如果您能为每个脚注创建如下超链接，我将非常感谢您提供一些关于如何从基本层面上考虑这一点的提示。

：

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit <sub><a class="footnote" href="/footnote.php?id=123">[123]</a></sub>.</p>

下面是一个示例，我使用

$替换了一个AJAX调用。get

使用

Promise

来说明代码是如何工作的

//仅作示例之用
var html='Lorem ipsum door sit amet，concetetur adipising elit。沃卢帕斯建筑设计师沃卢帕塔姆（voluptatem）认为，时间的自然是一种类似于劳动的排斥劳动的罪过。
'；
$（'.footnote'）。在（'click'，函数（事件）{
event.preventDefault（）；
var$modal=$（“#脚注modal”）；
//仅供参考
Promise.resolve（html）
.然后（功能（响应）{
$modal.find（'.modal body'）.html（响应）；
$modal.modal（）；
});
//调用PHP脚本的实际代码
//$.get（event.target.href，函数（响应）{
//$modal.find（'.modal body'）.html（响应）；
//$modal.modal（）；
// });
});

JS-Bin
Lorem ipsum dolor sit amet，奉献精英

白花蛇舌草

脚注
&时代；
因此，为了解决这个问题，我不得不回去检查一些基本逻辑

我使用echo语句在php中创建了html。当我学习PHP时，我最初就是这样写的。是时候进行重构了。使用html，根据需要嵌入少量PHP和代码标记

我使用的是一个旧版本的引导，它允许一个在BS4中被弃用的功能。直到以前的工作代码在BS4中出现故障，我才意识到该功能是有效的

使用最新的BS使我意识到需要jQueryAjax。我想留在vamilla JS，但我意识到我对JS的理解比我想象的要好得多，然后能够使用jQuery文档来处理从PHP get中提取的远程数据

我重构了我的php脚本以返回JSON，并在服务器端进行数据争用，只需将所需的数据传递给我的js脚本以填充模式

$('.footnote').on('click', function (event) {
    event.preventDefault();
    var $modal = $('#footnote-modal');

    $.get(event.target.href, function (response) {
        $modal.find('.modal-body').html(response);
        $modal.modal();
    });
});

我设置了模态div，这实际上比我所抱怨的要简单得多

我重构了数据库中的脚注标记。在我的数据库工具中使用替换功能的简单任务

下面是我解决问题的方法：

将标记重构为此格式：

为了澄清，您有各种脚注链接，单击这些链接时，您希望从远程PHP脚本加载脚注详细信息，并在引导模式中显示它们？PHP脚本返回的数据是什么格式？JSON、HTML或其他内容？根据脚注引用的长度，您可以简单地遵循。是的。福巴。数据是HTML格式的。尽管返回JSON可能是以后的重构。gahhhh！！评论界面对于围绕问题和答案进行对话来说真的很糟糕。我要看看我能不能让它工作。我肯定有一些问题，但首先让我尝试实现您介绍的内容。我是否要用AJAX替换$.get？我想用vanilla JS来做AJAX调用，在这种情况下行得通吗？为什么要使用vanilla JS，而Bootstrap已经需要jQuery了？仅供参考，
$。get
只是一个用于
xhr
调用的jQuery包装器。我知道这没有意义。忍耐一下。我现在不想解释我的推理。