JQuery.getJson()解析json文本

最新推荐文章于 2022-04-03 23:37:07 发布

wuwanyu_321

最新推荐文章于 2022-04-03 23:37:07 发布

阅读量497

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/wuwanyu_321/article/details/43459795

版权

web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

jQuery.getJSON()参考：http://api.jquery.com/jQuery.getJSON/

格式1的JSon，存在js中，实际上是一个数组：

var data =[
    {"item" : "<a class='item'><img src='img/a1.jpg' alt=''></a>"},
    {"item" : "<a class='item'><img src='img/a2.jpg' alt=''></a>"},
    {"item" : "<a class='item'><img src='img/a3.jpg' alt=''></a>"},
    {"item" : "<a class='item'><img src='img/a1.jpg' alt=''></a>"},
    {"item" : "<a class='item'><img src='img/a2.jpg' alt=''></a>"},
    {"item" : "<a class='item'><img src='img/a3.jpg' alt=''></a>"},
];

HTML代码：

<body>

    <div id="owl-demo" class="owl-carousel">
    </div>

</body>

js代码：

<!-- jQuery 1.7+  -->
<script src="jquery-1.11.0.min.js"></script>

<script type="text/javascript">

//html完成后启动
$(document).ready(function(){

readData();

});

//从data数组中，读取数值	
function readData(){

for(var i in data){

 $('#owl-demo').append(data[i].item);  //通过key取value
   
}
  
}
 </script>

读取完成后，最终效果：

格式2的JSon，存放在test.json文件中：

{
"one": "悄悄是别离的笙箫",
"two": "沉默是今晚的康桥",
"three": "........."
}

HTML代码：

<body>


</body>

js代码：

<!-- jQuery 1.7+  -->
<script src="jquery-1.11.0.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
/* 
    从test.json中读取数据，放在items数组中，利用join()函数，转化成字符串，最终放在body中
*/
  $.getJSON( "json/test.json", function( data ) {
		  var items = [];
		  $.each( data, function( key, val ) {
		  items.push( "<li id='" + key + "'>" + val + "</li>" );
		  });
          $( "<ul/>", {"class": "my-new-list", html: items.join( "" )}).appendTo( "body" );
   });

});
</script>

读取完成后，最终效果：

格式3的JSon，存放在data.json文件中：

    {
    "owl" : [
    {"item" : "<a class='item'><img src='img/a1.jpg' alt=''></a>"},
    {"item" : "<a class='item'><img src='img/a2.jpg' alt=''></a>"},
    {"item" : "<a class='item'><img src='img/a3.jpg' alt=''></a>"}
    ]
    }

HTML代码：

<body>

    <div id="owl-demo" class="owl-carousel">
    </div>

</body>

js代码：

<!-- jQuery 1.7+  -->
<script src="jquery-1.11.0.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

customDataSuccess();

});
	
function customDataSuccess(){

var items = [];

$.getJSON( "json/data.json", function( data ) {
/*遍历第1层*/
     $.each( data, function( key, val ) {
/*遍历第2层 */       
        for(var i in val){

          $('#owl-demo').append(val[i].item); }

        });
     });
}
</script>

读取完成后的效果：