jQuery中读取json文件示例代码

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

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

jQuery中读取json文件示例代码相关推荐

Android 在build.gradle文件中读取json文件
1.在build.gradle中加入读取1.json文件代码,放在android{}外面 String str = ""try {File file = new File(&quo ...
android 读json文件,在Android中读取json文件
小编典典将该文件放入资产中 . 对于在Android Studio项目中创建的项目,您需要在主文件夹下创建资产文件夹. 将该文件读取为: public String loadJSONFromAsse ...
esp8266 html文件,ESP8266 基ESP8266_RTOS_SDK (ESP-IDF )中嵌入网页文件(示例代码)
场景: 在写ESP8266 web服务的时候,免不了要将自己设计的网页html和css等文件放入到固件中.在arduino中有fs可以进行上传文件,然后通过文件系统读出.那在ESP-IDF中该怎么办呢 ...
Jquery中发送ajax请求示例代码
场景 jquey中实现发送ajax请求. 实现 function printCode(id){debugger$.ajax({type: 'POST',url: "",cache: ...
netcore读取json文件_.net core读取json格式的配置文件
在.Net Framework中,配置文件一般采用的是XML格式的,.NET Framework提供了专门的ConfigurationManager来读取配置文件的内容,.net core中推荐使用j ...
python读取json配置文件_Python简单读取json文件功能示例
本文实例讲述了Python简单读取json文件功能.分享给大家供大家参考,具体如下: read_json.json: { "rule":{ "namespace" ...
Unity C# 读取安卓persistentDataPath目录中的json文件
一.声明需要用到的命名空间 using LitJson; //用于读取Json文件 using System.IO; //用于声明StreamReader类 ...
项目中：Json文件的读取
项目中:Json文件的读取读Json文件取Json文件中内容举例: 举例:Json文件内容如下(Flickr8k) {'images':[{'sentids': [39300, 39301, 3 ...
将数据写入json文件，并且读取json文件中的数据
目录一.将数据生成json文件二.读取json文件中的数据三.方法测试四.其他附件 1.User实体类 2.import 一.将数据生成json文件方法 /*** 生成.json格式文件*/ ...

jQuery中读取json文件示例代码

jQuery中读取json文件示例代码相关推荐

最新文章

热门文章