ajax与HTML

发布时间：2020-12-16 03:37:25 所属栏目：百科来源：网络整理

导读：index.html： !DOCTYPE html html head meta charset = "UTF-8" title / title style type = "text/css" ul { font-size : 16 pt ; } / style script type = "text/javascript" function loadData (txt) { var request = new XMLHttpRequest(); var method =

index.html：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css"> ul { font-size: 16pt; } </style>
        <script type="text/javascript"> function loadData(txt) { var request = new XMLHttpRequest(); var method = "GET"; var url = txt + ".html"; request.open(method,url); request.send(null); request.onreadystatechange = function() { if(request.readyState == 4) { if(request.status == 200 || request == 304) { //返回的直接是html代码，直接嵌入到元素中就可以了 document.getElementById("detail").innerHTML = request.responseText; } } } } </script>
    </head>

    <body>
        <p>点击对应会显示详细信息,ajax请求服务器上的数据，将详细信息显示在下方</p>
        <ul>
            <li>
                <a onclick="loadData('AAA')">AAA</a>
            </li>
            <li>
                <a onclick="loadData('BBB')">BBB</a>
            </li>
            <li>
                <a onclick="loadData('CCC')">CCC</a>
            </li>
        </ul>
        <div id="detail"></div>
    </body>

</html>

AAA.html:

<h2>AAA</h2>
<p>email:AAA@gmail.com</p>

BBB.html:

<h2>BBB</h2>
<p>email:BBB@gmail.com</p>

CCC.html:

<h2>BBB</h2>
<p>email:BBB@gmail.com</p>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!