AJAX Изменение содержимого HTML

Я пытаюсь изменить содержимое div с помощью Ajax, однако ничего не происходит ... может кто-то помочь понять, что я делаю неправильно?AJAX Изменение содержимого HTML

Насколько я вижу, я ничего не пропускаю, но кнопки не соединяются. Я запускаю XAMPP, и apache включен.

Index Page

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
    <meta name="author" content="Malecia Legodi"> 
    <meta name="description" content="Reload Website"> 
    <script language="JavaScript" src="javascript.js"></script> 
</head> 
<body style="background-color:green"> 
    <div> 
     <nav> 
     <table> 
      <tr> 
       <td> 
        <input type="button" id="home" value="Home"/> 
       </td> 
       <td> 
        <input type="button" id="contact" value="contact" /> 
       </td> 
     </table> 
     </nav> 
     <section> 
      <div id="content" > 
       <h1>Content Review Summary</h1> 
       <p> 
        aaa... 
       </p> 
       <p> 
        bbb... 
       </p> 
      </div> 
     </section> 
     <footer align="center">&copy; Reload Website</footer> 
    </div> 
</body> 
</html>

контактная страница:

<h1>Content Review Summary</h1> 
<p> 
    ccc... 
</p> 
<p> 
    ddd... 
</p>

javascript.js

function initiate(){ 
    content = document.getElementById('content'); 
    var home = document.getElementById('home'); 
    var contact = document.getElementById('contact'); 
    home.addEventListener('click', readHome, false); 
    contact.addEventListener('click', readContact, false); 
} 

function readHome(){ 
    var url = "home.html"; 
    var request = new XMLHttpRequest(); 
    request.addEventListener('load', showContent, false); 
    request.open("GET", url, true); 
    request.send(); 
} 

function readContact(){ 
    var url = "contact.html"; 
    var request = new XMLHttpRequest(); 
    request.addEventListener('load', showContent, false); 
    request.open("GET", url, true); 
    request.send(); 
} 

//function showContent() to add data into your 
function showContent(e){ 
    //add data to secContent 
    content.innerHTML = e.target.responseText; 
} 

//use the listener to load your initiate() function 
window.addEventListener('load', initiate, false);

источник

2014-11-03 Bruce McLachlan

Вы получаете какие-либо ошибки? – ankur

Где вы указали переменную содержимого? – Amy

@ankur, Нет. Я не получаю никаких ошибок, страница просто не меняется вообще. –

Изменение ДИВ идентификатор content в secContent"

изменить также:

content = document.getElementById('content');

content = document.getElementById('secContent');

Как:

content.innerHTML = e.target.responseText;

secContent.innerHTML = e.target.responseText;

последняя пара вашего в JavaScript блоков кода точно так, чтобы пример, который я получил в колледже (Хотя рассматриваемый пример читал только один .txt-файл, а не несколько htmls, он имел ту же проблему). Мне удалось заставить его работать по указанному выше методу. Надеюсь, это поможет вам.

источник

2015-03-11 14:34:35

AJAX Изменение содержимого HTML

ответ

Смежные вопросы