jquery LOAD 和 bootstrap 4 问题答案

【问题标题】：jquery LOAD and bootstrap 4 issuesjquery LOAD 和 bootstrap 4 问题
【发布时间】：2018-08-18 05:23:07
【问题描述】：

我正在尝试执行以下操作。

<button data-target="#myModal" data-toggle="modal" type="button" class="btn btn-primary">Details</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title" id="exampleModalLabel">Modal 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">
    <div class="bodyContent"></div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  </div>
</div>

$('#myModal').on('shown.bs.modal', function (e) {
  $('.bodyContent').load('http://www.google.com');
 })

但是，当我单击按钮并加载模型时，内容为空白。我不确定我在这里做错了什么？我已经尝试了很多不同的方法，但这应该是正确的。

【问题讨论】：

您无法使用 Ajax 加载 http://www.google.com。那是与您不同的域。 Google 不接受跨域加载。某些网站（确切地说是某些网站上的特定资源）会...但是在这种情况下，您会在控制台中收到 CORS 错误。

标签： jquery html bootstrap-4

【解决方案1】：

通常，当您调用.load() 时，您需要一个回调函数来实际将内容放入其中。例如，下面的代码很适合你：

$('body').load(url, function(responseTxt, statusTxt, xhr){
   $('.bodyContent').html(responseTxt);
});

另外，JQuery 的缩小版没有.load() 函数。只有完整版才有。您应该只加载完整版本，而不是同时加载两个不同的版本！

更新：我有一个运行良好的 JSFiddle sn-p。单击该按钮时，您应该会看到Use POST method for /echo/html, see http://doc.jsfiddle.net/use/echo.html。不过，这仍然是一个合法的答案:)

LINK

您需要加载的唯一 JQuery 是最新版本。也不要买“苗条”的。缩小（“min”）很棒，这样做，但不要做苗条。下面的代码效果很好：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

【讨论】：

你能举一个小提琴的例子或sn-p吗？我不确定如何实现。
正在处理它。尝试用我所拥有的替换 $('.bodyContent').load('http://www.google.com'); 行。
很确定你让这种方式变得更加困难。我只想显示谷歌。没有别的了。
正如 Louys 所说，“使用完整版时，在加载 www.google.com 时会遇到 CORS 问题：请求的资源。因此，不允许访问 Origin 'null'。 == 这意味着无论如何你都不能这样做。这并不复杂。只需删除提取的 JQuery 加载行，然后添加我列出的一小段代码。（我做了一点更新，所以它是less intimidating）
重点是你不能那样向 Google 展示...这是我对 CORS 问题的回答的一部分。