json文件是一种轻量级的数据交互格式。一般在jquery中使用getJSON()方法读取。

$.getJSON(url,[data],[callback])

url：加载的页面地址 
data: 可选项，发送到服务器的数据，格式是key/value 
callback:可选项，加载成功后执行的回调函数 
1.首先建一个JSON格式的文件userinfo.json 保存用户信息。如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
[
{
"name":"张国立",
"sex":"男",
"email":"zhangguoli@123.com"
},
{
"name":"张铁林",
"sex":"男",
"email":"zhangtieli@123.com"
},
{
"name":"邓婕",
"sex":"女",
"email":"zhenjie@123.com"
}
]

2.其次建一个页面用于获取JSON文件里的用户信息数据，并显示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>getJSON获取数据</title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<style type="text/css">
#divframe{ border:1px solid #999; width:500px; margin:0 auto;}
.loadTitle{ background:#CCC; height:30px;}
</style>
< script type = "text/javascript" >
$(function (){
  $("#btn").click(function ()  {
    $.getJSON("js/userinfo.json", function (data){
      var $jsontip = $("#jsonTip");
      var strHtml = "123";
      //存储数据的变量
      $jsontip.empty();
      //清空内容
      $.each(data, function (infoIndex, info){
        strHtml += "姓名：" + info["name"] + "<br>";
        strHtml += "性别：" + info["sex"] + "<br>";
        strHtml += "邮箱：" + info["email"] + "<br>";
        strHtml += "<hr>"
      })
      $jsontip.html(strHtml);
      //显示处理后的数据
    })
  })
})
</script>
</head>
<body>
<div id="divframe">
<div class="loadTitle">
<input type="button" value="获取数据" id="btn"/>
</div>
<div id="jsonTip">
</div>
</div>
</body>
</html>

da.json

通过ajax获取json数据的实现代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>通过ajax获取json数据的实现代码</title>
<script type="text/javascript" src="//www.jb51.net/jslib/jquery/jquery.min.js"></script>
</head>
<body>
<div id="ok"></div>
<script>
$(function () {
    $.ajax({
      type: "POST",
      dataType: "json",
      url: "da.json",
      success: function (result) {
        var str = "";
                $.each(result,function(index,obj){             
                str += "<a href='" + obj["url"] + "' target='_blank'><img src='" + obj["img"] + "' /></a>";                  
                });
        $("#ok").append(str);
      }
    });
});
</script>
</body>
</html>

通过$.getJSON获取json的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>通过$.getJSON获取json的代码</title>
<script type="text/javascript" src="//www.jb51.net/jslib/jquery/jquery.min.js"></script>
</head>
<body>
<div id="ok"></div>
<script>
$(function(){
$.getJSON("da.json",function(data){
var $jsontip = $("#ok");
var strHtml = "";//存储数据的变量
$jsontip.empty();//清空内容
$.each(data,function(infoIndex,info){
    strHtml += "<a href='" + info["url"] + "' target='_blank'><img src='" + info["img"] + "' /></a>";
})
$jsontip.html(strHtml);//显示处理后的数据
})
})
</script>
</body>
</html>

JS读取json 文件的更多相关文章

  1. js读取json数据（php传值给js）

    <?php $array =array('fds','fdsa','fdsafasd');  // json_encode($array); ?> <html> <hea ...

  2. jQuery读取json文件，实现省市区/县（国标）三级联动

    最近做一个微信项目,需要用户填写所在的省市区/县,决定使用jQuery读取json文件来实现省市区/县的联动. 其实很简单,jQuery文档也有详细解释: 代码如下: html <table w ...

  3. jqery ajax读取json文件

    json文件数据 [ {"name":"哈哈··","email":"邮箱01","gender": ...

  4. node-webkit读取json文件

    1.原理 node-webkit包含了node.js,node.js提供了处理json数据文件的方法,通过node.js提供的方法,我们可以比较方便地读取json文件. 2.示例 这里我们读取的文件是 ...

  5. 手工创建tomcat应用，以及实现js读取本地文件内容

    手工创建tomcat应用: 1.在webapps下面新建应用目录文件夹 2.在文件夹下创建或是从其他应用中复制:META-INF,WEB-INF这两个文件夹, 其中META-INF清空里面,WEB-I ...

  6. jquery无法读取json文件问题

    jquery无法读取json文件,如:user.json文件无法读取.把user.json文件的后缀名修改为aspx,文件内容不变,则可以读取~ 原理不懂!~~

  7. Unity 用C#脚本读取JSON文件数据

    读取JSON文件数据网上有很多方法吗,这里采用SimpleJSON,关于SimpleJSON的介绍参考以下链接:http://wiki.unity3d.com/index.php/SimpleJSON ...

  8. cocos2d-x 读取 json 文件并用 jsoncpp 做解析

    一码胜万言(请看注释) CclUtil.h // // CclUtil.h // PracticeDemo // // Created by kodeyang on 8/1/13. // // #if ...

  9. spring注解读取json文件

    开发时候在接口没有提供的时候,可以用json文件提前模拟接口数据 1.service层 package com.syp.spring.service; import java.io.File; imp ...

随机推荐

  1. 如何用prometheus监控k8s集群中业务pod的metrics

    一般,我们从网上看到的帖子和资料, 都是用prometheus监控k8s的各项资源, 如api server, namespace, pod, node等. 那如果是自己的业务pod上的自定义metr ...

  2. GMM实战

    一道作业题: https://www.kaggle.com/c/speechlab-aug03 就是给你训练集,验证集,要求用GMM(混合高斯模型)预测 测试集的分类,这是个2分类的问题. $ hea ...

  3. windows下安装mysql8.0压缩版

         下面总结下安装过程: 首先解压下载好的压缩版本. 将解压后mysql的bin文件目录配置系统环境path变量中 使用cmd打开命令窗口,输入mysqld  --initialize命令初始化 ...

  4. BeautifulSoup使用总结

    一.介绍 BeautifulSoup为一个python库,它可以接收一个HTML或XML的字符串或文件,并返回一个BeautifulSoup对象,之后我们可以使用BeautifulSoup提供的众多方 ...

  5. Javascript的字符串（String）操作学习

    1.bold() 方法用于把字符串显示为粗体.语法: stringObject.bold() 如下,对str进行bold操作之后,实际上时对这个字符串加了<b>标签,在文档中将以粗体进行展 ...

  6. Xamarin iOS教程之申请付费开发者账号下载证书

    Xamarin iOS教程之申请付费开发者账号下载证书 Xamarin iOS使用真机测试应用程序 在讲解iOS Simulator时,已经提到了虽然iOS Simulator可以模仿真实的设备,但是 ...

  7. 「WC 2019」数树

    「WC 2019」数树 一道涨姿势的EGF好题,官方题解我并没有完全看懂,尝试用指数型生成函数和组合意义的角度推了一波.考场上只得了 44 分也暴露了我在数数的一些基本套路上的不足,后面的 \(\ex ...

  8. BZOJ.5248.[九省联考2018]一双木棋chess(对抗搜索 记忆化)

    BZOJ 洛谷P4363 [Update] 19.2.9 重做了遍,感觉之前写的有点扯= = 首先棋子的放置情况是阶梯状的. 其次,无论已经放棋子的格子上哪些是黑棋子哪些是白棋子,之前得分如何,两人在 ...

  9. 【优先队列+贪心】BZOJ1826-[JSOI2010]缓存交换

    ……啊开始颓了. [题目大意] 已知当前集合最大容量为m,n个询问.每次询问一个元素,如果集合中没有则需要加入该元素,如果集合已经满了则需要先删去集合中的某些元素再加入.问至少要加入几次元素? [思路 ...

  10. 菜鸟nginx源码剖析

    菜鸟nginx源码剖析 配置与部署篇(一) 手把手配置nginx "I love you" TCMalloc 对MYSQL 性能 优化的分析 菜鸟nginx源码剖析系列文章解读 A ...