2017-07-12 9 views
0

jqueryを使用してdivタグ内の外部HTMLファイルを.load()関数でロードしようとしていますが、動作しません。ロードされません。ここでは、コードは次のようになります。jqueryのロードまたは投稿の問題

https://jsfiddle.net/h9sngz95/

私が間違ってやっていますか?私はエラー{"エラー": "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"); 

} 

答えて

0
  1. JSFiddleもStackSnippetsどちらも、HTMLページを取得するために、AJAXは限り私は(特定のjsfiddleページへ除いて)理解してもエラーのコンソールで探す
  2. ポストを許可する可能性があなたが望むものではありません。
  3. $("#bodyinsert").load("about.html");は、あなたが望むものである可能性が高い - それは、ページが同じサーバー、スクリプトと同じ起源であることを意味する - ChromeでAJAXをファイルシステムに使用することはできません。

またクリックで自分を支持を行うと、URLのHREFまたはデータ属性を使用してのpreventDefault

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