Ajax 读取 JSON

A- A+
流沙团 • • web前端 • 4417View 0

学习用的代码,意义不大 


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Ajax - XML</title>
</head>

<style type="text/css">
    #details{
        width:400px;
        height: 200px;
        background-color: aliceblue;
    }
</style>

<script type="text/javascript">

    window.onload = function(){
        var aNodes =  document.getElementsByTagName("a");
        //alert(aNodes.length);
        for(var i=0;i<aNodes.length;i++)
        {
            aNodes[i].onclick = function(){

                var request  = new XMLHttpRequest();
                var method = "GET";
                var url = this.href;

                request.open(method,url);
                request.send(null);

                request.onreadystatechange = function(){
                    if(request.readyState == 4){
                        if(request.status == 200 || request.status == 304){
                            //document.getElementById("details")
                           var jsonData = request.responseText;
                            var object = eval("("+jsonData+")");

                            var name = object.person.name;
                            var website = object.person.website;
                            var email = object.person.email;

                            var str = name+"<br/>"+website+"<br/>"+email;

                            document.getElementById("details").innerHTML = str;

                        }
                    }
                }
                return false;
            }

        }
        
    }

</script>
<body>
<h1>people</h1>
<ul>
    <li><a href="json/andy.json">Andy</a></li>
    <li><a href="json/richard.json">Richard</a></li>
    <li><a href="json/jeremy.json">jeremy</a></li>
</ul>

<div id="details">


</div>

</body>
</html>


原文链接： Ajax 读取 JSON 版权所有，转载时请注明出处，违者必究。
注明出处格式：流沙团 ( https://gyarmy.com/post-59.html )

发表评论

0则评论给“Ajax 读取 JSON”