示例 json with js

11.html:

  <html>
  <head>
    <title></title>
    <script type="text/javascript" src="test.json" ></script>
    
  </head>

  <body>
    <div>这是测试js读取json文件</div>
    <div id="content">
    </div>
  </body>

  <script type="text/javascript">
    window.onload=function(){

      var str=document.getElementById("content");

      var temp="";
      for (var i =  0; i < list.length; i++) {
        temp+="<p>"+list[i].name+"----"+list[i].gender+"</p>";

      }
      str.innerHTML+=temp;

    }
  </script>
  </html>

　　test.json:

list=[
　　{
　　　　"name":"xiaoming",
　　　　"gender":"male",
　　　　
　　},
　　{
　　　　"name":"lili",
　　　　"gender":"female",
　　　　
　　}
]

　　result:

 

注意易错点：

1、这个得记住怎么写吧。src可以写json的来源地址。

<script type="text/javascript" scr="..."></script>

　　2、加载函数写法不要写错。

正确写法：  window.onload=function(){};

我曾经写错： windows.onload()={};

　　3、在div，id为111的内容里，添加数据。

var str=document.getElementById("111");
var temp="";
str.innerHTML+=temp;

　其中str是什么？

<div id="content">
</div>

　　

其实是这个概念:

不改动json文件的话只能用ajax或类似方式来读取.
标准的json文件本来就不应该用script的形式导入.

所以 只有json里加list= （做改动）才可以通过script形式导入。

不然涉及到跨域什么的，可能以下方法可用：

$.ajax() JSONP

 

json的格式：

[{ },{},{}]

1、方括号是保存数组。

2、花括号是保存对象

3、每个花括号里是多对 名称和值的键值对。比如{ "name":"xiaoli","gender":"男"}

posted @ 2018-03-21 15:26  呼噜喵喵  阅读(188)  评论(0)    收藏  举报