JS读取json 文件-低调大师

JS读取json 文件

2017-12-26 585

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>

微信关注我们

原文链接：https://yq.aliyun.com/articles/486728

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

Django学习笔记----快速入门

上一篇>Django学习笔记----环境搭建基于Windows 基于以下环境: Windows 10 Python 3.6 Django 1.18 开始第一个Django项目进入Cmder, 进入想创建工程的文件夹, 键入django-admin startproject 项目名注意不能选择test这样的项目名称, 会于Python已有的模块名称冲突 Begin! 生成成功后, 可以看到如下项目结构 mysite/ manage.py mysite/ __init__.py settings.py urls.py wsgi.py manage.py: 一个实用的命令行工具，可让你以各种方式与该 Django 项目进行交互。 mysite/_init_.py: 一个空文件，告诉 Python 该目录是一个 Python 包。 mysite/settings.py: 该 Django 项目的设置/配置。 mysite/urls.py: 该 Django 项目的 URL 声明; 一份由 Django 驱动的网站"目录"。 mysite/wsgi.py: 一个 WSGI 兼容的 We...

2017-12-27

663

没有枚举之前：在没有枚举之前，我们想列举一些相关的常量，我们会采用如下的方式： 1 2 3 4 interface ActionInterface { public static final int RIGHT = 0 ; public static final int LEFT = 1 ; } 然后在某个类似于下面的方法中，使用这些常量： 1 2 3 4 5 6 7 8 9 10 11 12 public void playWithInterface( int num) { switch (num) { case ActionInterface.RIGHT: System.out.println( "RIGHT" ); break ; case ActionInterface.LEFT: System.out.println( "LEFT" ); break ; default : System.out.println( "Default" ); } } 不知道你注意了没，在这样做的时候，请记住这类常量是 Java 中 int 类型的常量，这意味着该方法可以...

2017-12-28

620

资源下载

更多资源

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。