Bootstrap 模态窗口自动接收 AJAX 的内容答案

【问题标题】：Bootstrap modal window automatically receiving content of AJAXBootstrap 模态窗口自动接收 AJAX 的内容
【发布时间】：2018-04-26 10:12:55
【问题描述】：

我正在尝试创建一个包含 AJAX 请求结果的引导模式。

我的引导代码如下

{{--Bootstrap modal--}}
<div id="exampleModal" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Electronic mail title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Electronic mail body text goes here.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary">Save changes</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

还有一个按钮，你可以看到它的 HREF 属性调用了打算通过 AJAX 调用的路由。

<a href="api/myroute/someID" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Preview Reminder</a>

我已经编写了从 api/myroute/someID 返回内容的后端代码

到目前为止，前端代码是从引导文档复制/粘贴的示例代码，后端代码是我自己的。

下一步是编写一些 Javascript，它将 AJAX 调用的内容带到 api/myroute/someID 并将其放置在模式窗口中。

问题是虽然我还没有写这个代码从此路由返回的内容会自动放置在模态窗口中。

但是，这只能正常工作一次。打开第二个模态窗口并在路由末尾放置一个不同的“someID”（因此它返回不同的数据）会导致一个模态窗口包含第一个 AJAX 调用的结果。

我有 2 个问题。

1) 这是如何工作的？ 2）如何让它每次打开时刷新模态的内容

【问题讨论】：

对不起，我正在使用 bootstrap 3
该 url 正在使用 remote option 将数据加载到模式中。这在 Bootstrap 4 中不存在。
好的，为什么每次我用不同的按钮（具有不同的 href 属性）打开模式时，它只显示第一次打开模式时加载的内容我如何刷新每次打开的内容？
哦，我看到“如果提供了远程 URL，内容将通过 jQuery 的加载方法加载一次”，这很容易让某些东西工作起来！
“每次刷新模态的”基本上是一个重复的问题。在“bootstrap modal jquery ajax”上搜索其他帖子。

标签： javascript ajax twitter-bootstrap twitter-bootstrap-3 bootstrap-modal

【解决方案1】：

Bootstrap 3 模态框有一个特性，如果开始元素具有 href 属性，则模态框将填充 href 属性做出的 http 请求的响应。

此功能已从 bootstrap 4 中删除。这仅适用于同一模型窗口一次。

【讨论】：