js读取json文件

最新推荐文章于 2024-08-16 16:27:09 发布
最新推荐文章于 2024-08-16 16:27:09 发布
阅读量1.8k 收藏 3
点赞数
分类专栏： Javascript
原文链接：https://www.cnblogs.com/mr-wuxiansheng/p/8128076.html
版权

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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

[

{ "img": "http://files.jb51.net/image/http.gif", "url":"http://www.jb51.net/1" },

{ "img": "http://files.jb51.net/image/jbzj.gif", "url":"http://www.jb51.net/2" },

{ "img": "http://files.jb51.net/image/tengxunyun.jpg", "url":"http://www.jb51.net/3" }

]

通过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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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>

leah阿
关注
专栏目录
JS读取JSON文件
hddzdd的博客
06-28 2万+
json文件是一种轻量级的数据交互格式。一般在jquery中使用getJSON()方法读取。 $.getJSON(url,[data],[callback]) url：加载的页面地址 data: 可选项，发送到服务器的数据，格式是key/value callback:可选项，加载成功后执行的回调函数 1.首先建一个JSON格式的文件userinfo.json 保存用户信息。如下: ...
js读取服务器json文件,原生js读取json文件
weixin_39836803的博客
08-04 6992
方法一1.首先编写一个json文件：demo.json[{"name":"张三","sex":"男","email":"zhangsan@123.com"},{"name":"李四","sex":"男","email":"lisi@123.com"},{"name":"王五","sex":"女","email":"wangwu@123.com"}]2.js读取json文件window.onload...
JS读取json 文件
weixin_33811539的博客
12-27 5693
json文件是一种轻量级的数据交互格式。一般在jquery中使用getJSON()方法读取。  $.getJSON(url,[data],[callback]) url：加载的页面地址 data: 可选项，发送到服务器的数据，格式是key/value callback:可选项，加载成功后执行的回调函数 1.首先建一个JSON格式的文件userinfo.json 保存用户信息。如下:  ? ...
js读取json数据
weixin_33691700的博客
07-21 100
示例如下： &lt;script type="text/javascript" language="javascript"&gt; var languages = {    cn:{    lang:'ch',    name:"中文" }, en:{    lang:"英文",    name:"en" } }; document.write(languages.cn.name);&amp
前端js读取本地json文件
最新发布
plz_Yif的博客
08-16 340
前端js读取本地json文件。
JavaScript读取json文件
weixin_43956958的博客
02-06 1442
JavaScript 对象与 JSON 对象的区别：在 JavaScript 中，对象的属性名称可以用单引号 ‘’ 或双引号 “” 括起来，也可以完全省略引号。但是，在 JSON 中，所有属性名称都必须用双引号括起来。使用JavaScript函数JSON.parse() 将文本转换成JavaScript对象。来将 json对象转化为json字符串。在Vue.js中首选将json文件引入。
js读写json文件实例代码
12-11
在JavaScript中，读写JSON文件通常涉及到客户端与服务器之间的交互，因为浏览器的同源策略限制了JavaScript直接操作本地文件的能力。然而，在特定环境下，如ActiveX对象在IE浏览器中的使用，可以实现本地文件的读写...
C#winform中读写json文件
01-02
以下是一个完整的示例，展示了如何在C# WinForm应用中读写JSON文件： ```csharp using System; using System.IO; using Newtonsoft.Json; public class Person { public string Name { get; set; } public int ...
js JSON的读取
limengmeng9006的专栏
12-06 505
js读取JSON的方法我接触到的有两种： 方法一：函数构造定义法返回 var strJSON = "{name:'json name'}";//得到的JSON var obj = new Function("return" + strJSON)();//转换后的JSON对象 alert(obj.name);//json name 方法二：js中著名的eval函数 var strJSON
JS获取json文件内容并处理参考
09-14
利用jquery的post功能获取json的内容并作后续处理， 本例子需要在web环境下跑 本例子需要在web环境下跑 本例子需要在web环境下跑
js读取解析JSON数据（转）
WGH100817的博客
02-23 1117
JSON(JavaScriptObject Notation) 是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包。 本文主要是对JS操作JSON的要领做下总结。 在JSON中，有两种结构：对象和...
JavaScript读取JSON文件
sinat_33793616的博客
10-02 305
前提 需要有jQuery.js在文件目录中 关键语句 $.getJSON("filepath", function (res) {alert(res)})
js读取json文件（原生和jQuery）
沧笙踏歌的博客
04-19 2464
1.首先编写一个json文件：demo.json [ { "name":"张三", "sex":"男", "email":"zhangsan@123.com" }, { "name":"李四", "sex":"男", "email":"lisi@123.com" }, { "name":"王五", "sex":"女", "email":"wangwu@123.com" ...
js读取json文件数据
weixin_40841731的博客
05-06 537
如果已经部署到线上了，可以用域名加文件路径，没有的话就http://localhost:8080/resource/default/static/data/mapdata.json 这种方式拿。注意 url 不能写成 ../../resource/default/static/data/mapdata.json 这种形式，这种url拿不到数据。localhost可以改成ip地址，8080端口改成自己项目的端口。
js读取json文件中的json数据
scbiaosdo的博客
07-04 5854
https://blog.csdn.net/qq_36371218/article/details/76066671?locationNum=3&amp;fps=1
关于json序列化的那些小事
源码森林
06-04 274
json.load()与 json.loads() json.dump()与 json.dumps() 1. json.load() 与 json.loads() 首先直接上定义 json.load(fp, *, cls=None, object_hook=None, parse_float=None, parse_int=None, parse_constant=None, object_pairs_hook=None, **kw) Deserialize fp (a .r...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值