使用 jquery 将 HTML 部分加载到 div 中答案

【问题标题】：Load an HTML partial into a div using jquery使用 jquery 将 HTML 部分加载到 div 中
【发布时间】：2015-10-01 17:31:35
【问题描述】：

帮助！

我有一个主页（index.html）和几个部分页面（只是 HTML 文件）。单击导航栏中的链接时，我正在尝试将其中一个部分加载到我的 index.html 页面上的 div 中。我认为 JQuery 最适合这个，但部分永远不会加载，我收到此错误消息“跨源请求仅支持协议方案：http、data、chrome、chrome-extension、https、chrome-extension-resource。”我不确定是什么原因造成的——这似乎是非常简单的代码。这是我所拥有的：

HTML:

  <head>
  <link rel="stylesheet" type="text/css" href="css/style.css"> 

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




</head>

 <body>

 <div id="nav">


    <ul>
    <li><a href="partials/art.html">art</a></li>

            <li><a href="partials/design.html">   design</a></li>

            <li><a href="#" id="load_illustration">   illustration</a></li>

            <li><img src="images/LOGO.png" height="150" width="160"    alt="logo"></li>

         <li><a href="partials/about.html">   about</a></li>

         <li><a href="">   cv</a></li>

         <li><a href="partials/contact.html">   contact</a></li>
         </ul>
       </div>

     <div id="include">

      </div>

   <script>
  $(document).ready(function(){
  $("#load_illustration").on("click", function(){
    $("#include").load("partials/illustration.html");
    });
   });


 </script>
 </body>
 </html>

【问题讨论】：

标签： jquery partials

【解决方案1】：

看起来您从文件系统 (file:///) 运行代码。

您收到的错误消息说：“跨源请求仅支持协议方案：http ...”。

这意味着，您应该使用本地 Web 服务器运行您的代码，例如 apache。

【讨论】：