Question

我试图用Ajax改变div的内容，但没有任何反应......有人可以帮助看看我做错了吗？

据我所见，我没有遗漏任何东西，但按钮无法连接。我正在运行XAMPP并打开了apache。

索引页

<!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);

Answer 1

将div content更改为secContent"

同样改变：

content = document.getElementById('content');

到

content = document.getElementById('secContent');

以及：

content.innerHTML = e.target.responseText;

到

secContent.innerHTML = e.target.responseText;

你的javascript的最后几段代码与我在大学时给出的一个例子完全相同（虽然有问题的例子只是读取一个.txt文件而不是几个htmls它有同样的问题）。我设法通过上面提到的方法使它工作。希望它也会对你有所帮助。

AJAX更改HTML内容

1 个答案: