javascript - 学习Ajax : Dynamic content not loading

Question

我开始为一个项目学习 Ajax，但我遇到了一些问题...这是我到目前为止的情况:

1-我有一个导航栏，其中有不同的按钮来显示内容。

2-我有一个 div 容器，用于存放所选内容。

3-当点击所需的内容时，它永远不会结束加载。

$(function(){

    $.ajaxSetup ({
        cache: false
    });
  
    var ajax_load = "<img width='50px' src='https://berkeleyloop.ridecell.com/static/common/images/loading-circle.gif'/>";
    
    var loadUrl1 = "http://fullhdpictures.com/wp-content/uploads/2015/04/Beautiful-Pagani-Zonda-Wallpapers.jpg";
    $("#load1").click(function(){
        $("#result").html(ajax_load).load(loadUrl1);
    });
    
    var loadUrl2 = "http://fullhdpictures.com/wp-content/uploads/2015/04/Most-Beautiful-Pagani-Zonda-Wallpapers.jpg";
    $("#load2").click(function(){
        $("#result").html(ajax_load).load(loadUrl2);
    });  
  
});

#navbar {
  position: fixed;
  left: 0;
  top: 0;
  width: 48px;
  height: 100%;
  background: #181818;
  overflow: hidden;
}

#result {
  position: relative;
  left: 50px; 
  width: calc(100% - 48px); 
  height: 100%;
}

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

<div id="navbar">
  <button id="load1">1</button>
  <button id="load2">2</button>
</div>

<div id="result"></div>

我错过了什么？请帮我达到我想要的效果!

Answer 1

您无法使用 load 从不同的网站加载内容。要做到这一点，你必须拥有权利。如果你检查你的控制台你会看到这个

“没有‘访问控制允许来源’”

编辑: 我认为这会有所帮助

codepen.io/airsakarya/pen/zqLVZo?editors=1010