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. Vue.JS 2.x

    基于ThinkPHP 5.0与Vue.JS 2.x的前后端开源开发框架VueThink VueThink 项目介绍 VueThink是一套基于Vue全家桶(Vue2.x + Vue-router2.x ...

  2. Web安全之跨站脚本攻击（XSS）

    XSS 简介 跨站脚本攻击,英文全称是 Cross Site Script,本来缩写是CSS,但是为了和层叠样式表(Cascading Style Sheet,CSS)有所区别,所以在安全领域叫做&q ...

  3. 记录一下SparkStreaming中因为使用redis做数据验证而导致数据结果不对的问题

    业务背景: 需要通过redis判断当前用户是否是新用户.当出现新用户后,会将该用户放入到redis中,以标明该用户已不是新用户啦. 出现问题: 发现入库时,并没有新用户入库,但我看了数据了,确实应该是 ...

  4. 100BASE-TX / 100BASE-T4/100BASE-FX

    IEEE标准共有以下几种:10BASE-5:粗缆.最大传输距离500米,使用AUI连接器连接或使用收发器电缆和收发器(MAU)进行连接.10BASE-2:细缆.实际传输距离为185米,使用BNC连接器 ...

  5. iOS 11开发教程（十三）iOS11应用编辑界面添加视图

    iOS 11开发教程(十三)iOS11应用编辑界面添加视图 在iOS中添加视图的方式有两种:一种是使用编辑界面添加视图:另一种是使用代码添加视图.以下是这两个方式的详细介绍. 1.编辑界面添加视图 使 ...

  6. 為你的文件夾添加“使用CMD命令打開”菜單

    最近在項目中,經常使用要使用一些python命令,要打開cmd窗口,再pushd或cd切換到某個文件夾,相當麻煩.於是想,何不在“文件夾”中添加右鍵“pushd”命令呢? 有了目的性,一切似乎就變得簡 ...

  7. mybatis学习笔记（六） -- maven+spring+mybatis从零开始搭建整合详细过程（下）

    继续 mybatis学习笔记(五) -- maven+spring+mybatis从零开始搭建整合详细过程(上) 五.使用监听器启动Spring容器 1.修改pom.xml文件,添加Spring-we ...

  8. 完全卸载oracle11g步骤(转)

    转自:http://blog.csdn.net/machinecat0898/article/details/7792471 完全卸载oracle11g步骤:1. 开始->设置->控制面板 ...

  9. Java常用加密方案及实现——AES和DES

    AES和DES都是对称加密算法,其中DES全称为Data Encryption Standard,AES全称为Advanced Encryption Standard即高级加密标准. DES现在已经不 ...

  10. 有强大的cURL，忘掉httpclient的吧！

    这段时间想做一个网页采集的程序,由于一网站采用了防采集的办法,我的httpclient总是在登录后无法获取到我想要过去的链接.在无数次的跟踪过后发现原来人家给返回的是javascript拼成的页面,而 ...