JS读取json 文件
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
1
2
3
4
5
|
[ ] |
通过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 文件的更多相关文章
- js读取json数据(php传值给js)
<?php $array =array('fds','fdsa','fdsafasd'); // json_encode($array); ?> <html> <hea ...
- jQuery读取json文件,实现省市区/县(国标)三级联动
最近做一个微信项目,需要用户填写所在的省市区/县,决定使用jQuery读取json文件来实现省市区/县的联动. 其实很简单,jQuery文档也有详细解释: 代码如下: html <table w ...
- jqery ajax读取json文件
json文件数据 [ {"name":"哈哈··","email":"邮箱01","gender": ...
- node-webkit读取json文件
1.原理 node-webkit包含了node.js,node.js提供了处理json数据文件的方法,通过node.js提供的方法,我们可以比较方便地读取json文件. 2.示例 这里我们读取的文件是 ...
- 手工创建tomcat应用,以及实现js读取本地文件内容
手工创建tomcat应用: 1.在webapps下面新建应用目录文件夹 2.在文件夹下创建或是从其他应用中复制:META-INF,WEB-INF这两个文件夹, 其中META-INF清空里面,WEB-I ...
- jquery无法读取json文件问题
jquery无法读取json文件,如:user.json文件无法读取.把user.json文件的后缀名修改为aspx,文件内容不变,则可以读取~ 原理不懂!~~
- Unity 用C#脚本读取JSON文件数据
读取JSON文件数据网上有很多方法吗,这里采用SimpleJSON,关于SimpleJSON的介绍参考以下链接:http://wiki.unity3d.com/index.php/SimpleJSON ...
- cocos2d-x 读取 json 文件并用 jsoncpp 做解析
一码胜万言(请看注释) CclUtil.h // // CclUtil.h // PracticeDemo // // Created by kodeyang on 8/1/13. // // #if ...
- spring注解读取json文件
开发时候在接口没有提供的时候,可以用json文件提前模拟接口数据 1.service层 package com.syp.spring.service; import java.io.File; imp ...
随机推荐
- Java 构造 BSON 数据类型
Java 构造 BSON 数据类型 整数/符浮点数 Java BSON 构造整数/符浮点数类型 // {a:123, b:3.14} BSONObject obj = new BasicBSONObj ...
- Android uses-permission 权限大全
Android uses-permission 权限大全 当编写某些程序时,你需要调用手机的某些功能 这时候你一定要记得启用相关的uses-permission, 很多网上贴出来的代码都不包含 Man ...
- 002 @RequestMapping的说明
一:修饰方法 1.举例 2.效果 二:修饰类 1.测试类 2.index.jsp 3.效果 ---------------- 三:映射请求请求方法 1.使用语法 分别是method 2.Method的 ...
- BZOJ.2142.礼物(扩展Lucas)
题目链接 答案就是C(n,m1) * C(n-m1,m2) * C(n-m1-m2,m3)...(mod p) 使用扩展Lucas求解. 一个很简单的优化就是把pi,pi^ki次方存下来,因为每次分解 ...
- BZOJ.1076.[SCOI2008]奖励关(概率DP 倒推)
题目链接 BZOJ 洛谷 真的题意不明啊.. \(Description\) 你有k次选择的机会,每次将从n种物品中随机一件给你,你可以选择选或不选.选择它会获得这种物品的价值:选择一件物品前需要先选 ...
- 在Activity中响应ListView内部按钮的点击事件的两种方法
转载:http://www.cnblogs.com/ivan-xu/p/4124967.html 最近交流群里面有人问到一个问题:如何在Activity中响应ListView内部按钮的点击事件,不要在 ...
- 【BZOJ-2595】游览计划 斯坦纳树
2595: [Wc2008]游览计划 Time Limit: 10 Sec Memory Limit: 256 MBSec Special JudgeSubmit: 1518 Solved: 7 ...
- Atcoder Grand Contest 010 B - Boxes 差分
B - Boxes 题目连接: http://agc010.contest.atcoder.jp/tasks/agc010_b Description There are N boxes arrang ...
- Slickflow.NET 开源工作流引擎高级开发(三) -- 并行分支容器与会签工作流模式的组合
前言: 流程引擎的核心功能是负责解析流程定义XML和流转,业务环节的不断积累,让人们不断总结和抽象出一些模式,这些模式统称为工作流模式(Workflow Pattern).本文的重点就是介绍一种常见 ...
- SlickMaster.NET 开源表单设计器快速使用指南
前言:在企业数据处理过程中,经常需要通过定制表单来输入业务数据.由于涉及的数据比较离散,并不同于ERP系统的紧密关联数据.假如由开发人员每个增加页面,工作量会比较大,后期后期的维护很升级也耗费时间和精 ...