Question

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

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

2-我有一个div容器，用于选择内容。

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

＆＃13;

$(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);
    });  
  
});

＆＃13;

#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%;
}

＆＃13;

<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>

＆＃13;

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

Answer 1

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

＆＃34;否＆＃39;访问控制 - 允许 - 来源＆＃39;＆＃34;

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

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

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

1 个答案: