Question

我正在尝试使用jquery使用.load（）函数在div标签内部加载外部html文件，但它不起作用。它没有加载。这是代码：

我做错了什么？我收到错误{“错误”：“请使用POST请求”} 但无论我使用.post还是.load仍然是相同的结果。内容未显示。怎么了？请帮忙。

<body> 
<div id="header">
<div id="logo"><a href="index.html"><img src="images/logolanhai.jpg"    
alt="" /></a></div>
 <ul>
<li><a href="" onclick="about();"><span>关于我们</span></a></li>
<li><a href="" onclick="services();"><span>服务项目</span></a></li>
<li><a href="" onclick="references();"><span>成功案例</span></a></li>
<li><a href="" onclick="contact();"><span>联系我们</span></a></li>
</ul>    
 </div>


<div id="bodyinsert"></div>
</body>

function about()
{
$.post( "about.html", function( data ) { $( "bodyinsert" ).html( data );
});

//   $("#bodyinsert").load("about.html");
}

function services()
{


   $("#bodyinsert").load("services.html");

}

function references()
{


   $("#bodyinsert").load("references.html");

}

function contact()
{


   $("#bodyinsert").load("contact.html");

}

Answer 1

根据我的理解，JSFiddle和StackSnippets都不会允许AJAX（除了特定的jsfiddle页面）还要在控制台中查看错误
发布获取HTML网页的可能性不大。
$("#bodyinsert").load("about.html");可能是您想要的 - 它确实意味着页面必须来自同一台服务器，与您的脚本相同 - 您无法在Chrome中使用AJAX来存档系统。

也帮自己一个忙，并为网址使用href或数据属性，并在点击时阻止默认

$(function() {
  $(".nav").on("click",function(e) {
    e.preventDefault(); // stop link
    $("#bodyinsert").load(this.href);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="header">
  <div id="logo">
    <a href="index.html"><img src="images/logolanhai.jpg" alt="" /></a>
  </div>
  <ul>
    <li class="selected"><a href="index.html" class="nav"><span>主页</span></a></li>
    <li><a href="about.html" class="nav"><span>关于我们</span></a></li>
    <li><a href="services.html" class="nav"><span>服务项目</span></a></li>
    <li><a href="references.html" class="nav"><span>成功案例</span></a></li>
    <li><a href="contact.html" class="nav"><span>联系我们</span></a></li>
  </ul>
</div>


<div id="bodyinsert"></div>

jquery加载或发布问题

1 个答案: