如何使用jQuery/AJAX加载HTML div内的html页面内容？

问题描述：

我想加载一个html文件（home.html）的内容到位于主html文件（index.html）内的div容器中，点击一个链接后，我想用jquery/ajax来做到这一点。我试图找到答案，但只有遇到有关PHP的答案，而不是HTML。如何使用jQuery/AJAX加载HTML div内的html页面内容？

这是HTML代码，我到目前为止有：

<!-- navigation bar --> 
    <nav> 
    <ul> 
     <li><a href="#" data-target="home.html">HOME</a></li> 
     <li><a href="#" data-target="work.html">MY WORK</a></li> 
     <li><a href="#" data-target="about.html">ABOUT ME</a></li> 
     <li><a href="#" data-target="services.html">SERVICES</a></li> 
     <li><a href="#" data-target="contact.html">CONTACT ME</a></li> 
    </ul> 
    </nav> 

    <!-- content div --> 

    <div id="content"> 

    </div> 

    <!-- footer --> 
    <section> 
    </section> 
    <footer> 
    <p>Copyright &copy; 2017, All Rights Reserved</p> 
    </footer> 
</div>

可能重复[如何从异步调用返回响应？]（http://*.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-打电话） –

我来看看吧，谢谢！ :) – Lizz

http://api.jquery.com/load/ –

答

你可以尝试以下;在这里你得到load.html的内容，并将其放入content div。

<!-- navigation bar --> 
      <nav> 
      <ul> 
       <li><a href="#" data-target="home.html">HOME</a></li> 
       <li><a href="#" data-target="work.html">MY WORK</a></li> 
       <li><a href="#" data-target="about.html">ABOUT ME</a></li> 
       <li><a href="#" data-target="services.html">SERVICES</a></li> 
       <li><a href="#" data-target="contact.html">CONTACT ME</a></li> 
      </ul> 
      </nav> 

      <!-- content div --> 

      <div id="content"> 

      </div> 

      <!-- footer --> 
      <section> 
      </section> 
      <footer> 
      <p>Copyright &copy; 2017, All Rights Reserved</p> 
      </footer> 
     </div> 

<script> 
$("#content").load("/resources/load.html"); 
</script>

答

jQuery代码看起来是这样的：

$('a').each(function(b,c){  //loop through each a element 
    $(c).on('click',function(){ //add click event listener 
     var link = $(this).attr('data-target'); //get the link from attribute 
     $('#content').load(link); //load the link's content into container 
    }); 
});

它将通过所有a元素循环和data-target属性获取链接。只要记住添加jQuery到您的网页。

如何使用jQuery/AJAX加载HTML div内的html页面内容？

相关推荐