json的应用 主要是如何解析一个json 和json 是怎么用的

<html>
<style type="text/css">
.leaf_div{
position :relative; left:10px;background-color:#00DB00;width:50px;
}
.leaf_e{width:50px;}

</style>
<script src="jquery-1.8.3.js"></script>
<script language="javascript">
function xs(obj){
if(document.getElementById('leaf_div').style.display=="none"){

//document.getElementById('leaf_div').style.display="block"; 
 $("#leaf_div").fadeIn(1000);
}else{
//document.getElementById('leaf_div').style.display="none";
$("#leaf_div").fadeOut(1000);

}

//alert(obj.nextSibling.className);
//obj.nextSibling.className="leaf_div_hide";
}
$(document).ready(function(){

});

</script>
<script language="javascript">

var provinces =[{"北京":['通州','海淀']},{"河北":['廊坊','保定']},{"河南":['洛阳','郑州']}];

function getValue(){

  alert(provinces[0]["北京"][0]); //通州 用 [0] 找到{"北京":['通州','海淀']} ,再用["北京"] 找到对应的市 注意用""

}

function getLeaf(obj){
  //alert(obj.innerText);
  //alert(provinces.length);
  //for(var i=0 ;i<provinces.length;i++){

     //alert(provinces[i]); 
  //}

 for(var key in provinces){
  //alert(key.length); 获得json数组元素个数 然后每一个元素 都是一个json对象 ,遍历这个json对象 ,每个json对象 里边放的都是 key:value 格式,遍历这个json对象 

  for(var j in provinces[key]){

    // alert(j);
     if(obj.innerText==j){
   
      //  alert(provinces[key][j][0]); // 通州

      var leaf="";
      for (var k in provinces[key][j] ){

     // alert( provinces[key][j][k]); // 得到 海淀 通州
    
      // document.getElementById('leaf_div').append

      leaf+='<div class="leaf_e">'+ provinces[key][j][k]+'<div>';
     // alert(leaf);
       }

       document.getElementById('leaf_div').innerHTML=leaf;
      }// if 结束
  }

  //alert("对应的值是:" + provinces[key]);} alert(key);
 }

 if(document.getElementById('leaf_div').style.display=="none"){

  document.getElementById('leaf_div').style.display="block"; 

 }else{
  document.getElementById('leaf_div').style.display="none";

 }
}

</script>
<body>
<!--<span onclick="xs(this);">北京</span>-->

<span onclick="getLeaf(this);">北京</span>
<div class="leaf_div" id="leaf_div" style="display:none">
<!--<div class="leaf_e">通州 </div><div class="leaf_e" >海淀 </div>-->
</div>

<!--<button onclick="getValue();"></botton>-->

</body>
</html>

-------------------------------------------------------------

读者们可以把上边的代码赋值到html 文本上 然后运行一下,希望你能够有点体会,这棵树 还有许多不足 希望提出宝贵意见,

到最后应该是页面得到一个json数组之后 ,就能够完整的解析出来一棵树才对 我是这么设计的,

我的Json例子 不是简单的说明 而是应用到具体实践当中 希望你们能够看到我和其他人有不一样的地方,谢谢,

另外我觉得学习也应该不是考转帖和知识例举出一些常识的概念 ,希望你们有所启发 也做一点东西出来 我们可以讨论交流

 

posted @ 2013-07-01 21:56  令狐冲之12  阅读(345)  评论(0编辑  收藏  举报