ajax与JSON

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

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

inedx.html:

<!DOCTYPE html>
<html>


    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css"> ul { font-size: 14pt; } </style>
        <script type="text/javascript"> function loadData(txt) { var request = new XMLHttpRequest(); var method = "GET"; var url = txt + ".json"; request.open(method,url); request.send(null); request.onreadystatechange = function() { if(request.readyState == 4) { if(request.status == 200) { //返回的是JSON数据 var result = request.responseText; //把返回的字符串转换为javascript对象 var JSONObject = eval('(' + result + ')'); var name = JSONObject.name; var email = JSONObject.email; var h2Node = document.createElement("h2"); h2Node.appendChild(document.createTextNode(name)); var pNode = document.createElement("p"); pNode.appendChild(document.createTextNode(email)); var detail = document.getElementById("detail"); //清空div原来的内容 detail.innerHTML = ""; detail.appendChild(h2Node); detail.appendChild(pNode); } } } } </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.json:

{
    "name": "AAA","email": "AAA@gmail.com" }

BBB.json:

{
    "name": "BBB","email": "BBBB@gmail.com" }

CCC.json:

{
    "name": "CCC","email": "CCC@gmail.com" }

（编辑：李大同）

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