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

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

url：加载的页面地址

data: 可选项，发送到服务器的数据，格式是key/value

callback:可选项，加载成功后执行的回调函数

1.      首先建一个JSON格式的文件userinfo.json 保存用户信息。如下:

[

{

"name":"张国立",

"sex":"男",

"email":"zhangguoli@123.com"

},

{

"name":"张铁林",

"sex":"男",

"email":"zhangtieli@123.com"

},

{

"name":"邓婕",

"sex":"女",

"email":"zhenjie@123.com"

}

]

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

<!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="jquery-1.11.0.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("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>

jQuery中读取json文件的更多相关文章

  1. jQuery中读取json文件示例代码

    json文件是一种轻量级的数据交互格式.一般在jquery中使用getJSON()方法读取,具体示例代码如下,感兴趣的朋友可以参考下哈,希望可以帮助到你   json文件是一种轻量级的数据交互格式.一 ...

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

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

  3. python中读取json文件报错，TypeError：the Json object must be str, bytes or bytearray，not ‘TextIOWrapper’

    利用python中的json读取json文件时,因为错误使用了相应的方法导致报错:TypeError:the Json object must be str, bytes or bytearray,n ...

  4. jquery easyui读取json文件乱码

    输出的json要求用utf-8,否则因json的编码格式有问题显示不了中文.记事本默认编码是ANSI,若保存的json是由记事本改后的缀名,则json格式有问题,显示中文为乱码. 解决方法:打开.js ...

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

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

  6. go从文件中读取json字符串并转换

    go从文件中读取json字符串并转换 将要读取的文件的一部分 [ { "children": [ { "children": [ { "code&qu ...

  7. 接口自动化（三）--读取json文件中的数据

    上篇讲到实际的请求数据放置在json文件内,这一部分记述一下python读取json文件的实现. 代码如下(代码做了简化,根据需要调优:可做一些容错处理): 1 import json 2 3 cla ...

  8. jqery ajax读取json文件

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

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

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

随机推荐

  1. Java实现web在线预览office文档与pdf文档实例

    https://yq.aliyun.com/ziliao/1768?spm=5176.8246799.blogcont.24.1PxYoX 摘要: 本文讲的是Java实现web在线预览office文档 ...

  2. 转：Uncovering Drupalgeddon 2（cve-2018-7600）漏洞深度解析(附漏洞利用代码地址)

    转:https://research.checkpoint.com/uncovering-drupalgeddon-2/ By Eyal Shalev, Rotem Reiss and Eran Va ...

  3. 洛谷P1404 平均数 [01分数规划，二分答案]

    题目传送门 平均数 题目描述 给一个长度为n的数列,我们需要找出该数列的一个子串,使得子串平均数最大化,并且子串长度>=m. 输入输出格式 输入格式: N+1行, 第一行两个整数n和m 接下来n ...

  4. 【面试总结-编程】多行两列数据，实现同key的value求和并输出

    一个文件,两列,多行. 第一列是字母,第二列是数字,同列数据之间通过空格分割. 统计首列字母相同的第二列之和. 样例输入: A 5 B 6 OO 7 A 6 A 2 OO 2 输出: A:13 B:6 ...

  5. NOIP2018游记(退役记。)

    Noip2018游记 这可能是写的最后一篇博客? \(Day0\) 早上六点从学校出发? 早上有雾,在车上扯淡,睡觉. 莫名其妙到了中午,想着午饭怎么解决,后来才知道早上发的四个面包竟然就包括我的午饭 ...

  6. Lisp em SCU - 4490 (强大的map用法)

    Time Limit: 1000 MS Memory Limit: 131072 K Description There are two lists and they may be intersect ...

  7. [BZOJ2878][NOI2012]迷失游乐园(环套树DP+概率)

    推荐讲解:https://www.cnblogs.com/Tunix/p/4561493.html 首先考虑树的情况,就是经典的树上概率DP.先DP出down表示从这个点向儿子走能走的期望长度,再DP ...

  8. HDU 6138 Fleet of the Eternal Throne（AC自动机）

    [题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=6138 [题目大意] 给出一些串,询问第x个串和第y个串的公共子串, 同时要求该公共子串为某个串的前 ...

  9. [CODE FESTIVAL 2016]Problem on Tree

    题意:给一棵树,对于一个满足以下要求的序列$v_{1\cdots m}$,求最大的$m$ 对$\forall1\leq i\lt m$,路径$(v_i,v_{i+1})$不包含$v$中除了$v_i,v ...

  10. Java 请求webServce接口 不带参数

    最近对接了个webService的接口取数据,从网上良莠不齐的代码中找到了个方法, 具体作者已经记不住是谁了,现在把代码贴出来,希望可以帮到大家,代码如下,简单粗暴 public String get ...