导入外部HTML内部内容与Javascript AJAX没有Jquery

Importing external HTML inner content with Javascript AJAX without Jquery

本文关键字：Javascript AJAX 没有 Jquery 外部 HTML 内部 导入      更新时间：2023-09-26

我需要一些帮助，我有以下HTML代码:

<ul class="menu-list">
  <li class="active"><a href="cont1.html" title="Title 1">Link 1</a></li>
  <li><a href="cont2.html" title="Title 2">Link 2</a></li>
  <li><a href="cont3.html" title="Title 3">Link 3</a></li>
  <li><a href="cont4.html" title="Title 4">Link 4</a></li>
</ul>
<div class="content">           
   <div class="innerContent">
        <!-- Insert external HTML content here -->
   </div>
</div>

因此，当我点击"链接1"时，例如，我需要从"cont1.html"中获取内部内容，并将其添加到div class="innerContent"中，不要忘记在单击的li中添加"class="active"。仅使用Javascript/AJAX，不使用Jquery，也不更改此HTML。

我在这里做了一个类似的示例，但正在为同一页面的内容工作，而不是不同的页面，我不知道为什么，但在IE上不起作用。

请问，有人能帮帮我吗?

试试这个

  <ul class="menu-list">
   <li class="active"><a href="javascript:display('cont1.html');" title="Title 1" >Link 1</a></li>
   <li><a href="javascript:display('cont2.html');" title="Title 2" >Link 2</a></li>
   <li><a href="javascript:display('cont3.html');" title="Title 3" >Link 3</a></li>
   <li><a href="javascript:display('cont4.html');" title="Title 4" >Link 4</a></li>
  </ul>
<div class="content">           
  <div class="innerContent" id="innerContent">
  </div>
</div>
javaScript 

function display(url)
{
   var xmlhttp;
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
           xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("innerContent").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET",url,true);
    xmlhttp.send();
}

听起来像是您想要对外部文件发出AJAX请求，然后使用responseText填充容器的innerHTML。

本文将指导您如何在不使用jQuery的情况下创建XMLHttpRequest—AJAX: https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest

因此，您必须创建一个函数，当您单击其中一个链接时运行，它将1)执行AJAX请求以获取外部HTML;2)填充您的innerContent <div>与responseText;3)改变<li>的"活动"类别。

相关文章：