18.jquery ajax与JSON

来源：互联网发布：域名怎么解析到空间编辑：程序博客网时间：2024/05/18 03:54

index.html:

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            ul {                font-size: 14pt;            }        </style>        <script src="../../js/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>        <script type="text/javascript">            $(document).ready(function() {                $("a").click(function() {                    var url = $(this).text() + ".json";                    $.getJSON(url, function(json) {                        var JSONObject = json;                        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 id="aaa">AAA</a>            </li>            <li>                <a id="bbb">BBB</a>            </li>            <li>                <a id="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"}

0 0