学习Ajax：动态内容无法加载

I'm starting to learn Ajax for a project but I got some problems... This is my situation so far:

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

1- I have a navbar with different buttons to show content.

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

2- I have a div container where goes the selected content.

2-我有一个div容器,其中包含所选内容。

3- When clicked the desired content it never ends loading.

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>

What did I missed? Please help me to achieve the desired effect!

我错过了什么?请帮助我达到预期的效果!

1 个解决方案

#1

you can't load content from different web site by using load. to do that you has to be rights. if you check your console you will see this

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

"No 'Access-Control-Allow-Origin'"

edit: i think this will help

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

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

#1