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. idea导入或者检出项目时发现编辑器左侧无法显示项目目录结构

    按下列步骤操作: 1. 关闭IDEA,  2.然后删除项目文件夹下的.idea文件夹 3.重新用IDEA工具打开项目

  2. BNUOJ 52516 Just A String

    $KMP$. 枚举每一个后缀,去原串中进行匹配,每次匹配到原串到$i$位置的后缀与这次枚举的后缀的前缀,更新答案. #include<bits/stdc++.h> using namesp ...

  3. Python之路【第二篇】: 列表、元组、字符串、字典、集合

    本文内容: -------------------------------------- 列表.元组操作 字符串操作 字典操作 集合操作 文件操作 字符编码与转码 1. 列表(list) 序列是Pyt ...

  4. 【转】LoadRunner常见问题整理

    原文出自:http://blog.csdn.net/loadrunn/article/details/7886918 1.LR 脚本为空的解决方法: 1.去掉ie设置中的第三方支持取消掉 2.在系统属 ...

  5. ssm+RESTful bbs项目后端主要设计

    小谈: 帖主妥妥的一名"中"白了哈哈哈.软工的大三狗了,也即将找工作,怀着丝丝忐忑接受社会的安排.这是第一次写博客(/汗颜),其实之前在学习探索过程中,走了不少弯路,爬过不少坑.真 ...

  6. PlayMaker GUI跟随布局的使用

    PlayMaker GUI跟随布局的使用   PlayMaker提供一种的特殊的GUI布局方式GUI Layout (Begin) Area Follow Object.这种布局可以在特定游戏对象上显 ...

  7. Vue 2.0学习（七）方法与事件

    基本用法 以监听一个按钮的点击事件为例,设计一个计数器,每次点击都加1: <div id = "app"> 点击次数:{{ counter }} <button ...

  8. Hibernate hql（hibernate query language）基础查询

    在开发过程中,数据库的操作我们其实更多的用到的是查询功能,今天开始学习hql的查询. 1.加入必要的工具 2.Hibernate配备的一种非常强大的查询语言,这种查询语言看上去很像sql.但是不要被语 ...

  9. Linux下sublime的中文输入问题

    比较久了,今天找到了解决方案: git clone https://github.com/lyfeyaj/sublime-text-imfix.git cd sublime-text-imfix &a ...

  10. 【洛谷】P1631： 序列合并

    P1631 序列合并 题目描述 有两个长度都是N的序列A和B,在A和B中各取一个数相加可以得到N2个和,求这N2个和中最小的N个. 输入输出格式 输入格式: 第一行一个正整数N: 第二行N个整数Ai​ ...