ajax解析json数据代码,Js代码库,德仔网

代码语言

代码分类

【Js】 ajax解析json数据

作者:沅泽 / 发布于2016/5/10/ 562

{"person":{
    "name":"zqwang121",
    "website":"http://zqwang.cc",
    "email":"zqwang121@sina.com"
}
}

<script type="text/javascript">
    window.onload=function(){
        var aNodes=document.getElementsByTagName("a");
        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){
                        //1.结果为json格式，所以需要使用responsexml来获取
                        var result=request.responseText;
                        var object=eval("("+result+")");
                        //2.结果不能直接使用，必须先创建对应的节点，再把节点加入到details里面
                        //目标格式为
                        /*
                        <h2><a href="zqwang121@sina.com">zqwang121</a></h2>
                        <a href="http://zqwang.cc">http://http://zqwang.cc</a>
                        */
                        var name=object.person.name;
                        var website=object.person.website;
                        var email=object.person.email;
                        //alert(name);
                        //alert(website);
                        //alert(email);
                        var aNode=document.createElement("a");      
                        aNode.appendChild(document.createTextNode(name));               
                        aNode.href="mailto:"+email;
                         
                        var h2Node=document.createElement("h2");
                        h2Node.appendChild(aNode);
                         
                        var aNode2=document.createElement("a");
                        aNode2.appendChild(document.createTextNode(website));
                        aNode2.href=website;
                         
                        var detailsNode=document.getElementById("details");
                        detailsNode.innerHTML="";
                        detailsNode.appendChild(h2Node);
                        detailsNode.appendChild(aNode2);
                         
                    }
                }
            }
                return false;
            }
        }
    }
             
</script>

<body>
  <h1>People</h1>
  <ul>
      <li><a href="1.html">1</a></li>
      <li><a href="2.html">2</a></li>
      <li><a href="3.html">3</a></li>
  </ul>
  <div id="zqwang121"></div>
</body>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　json　

同语言下

可能有用的

沅泽贡献的其它代码(20)