JS读取json 文件

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>

</body>

</html>

da.json

[

{ "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数据的实现代码

<!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的代码

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

JS读取json 文件相关推荐

node.js 读取json文件
node.js 读取json文件效果图目录结构 data.json index.htm app.js 学习资源推荐效果图目录结构 data.json [{"name": & ...
js读取json文件和读取数据库的速度的差别
今天想直接js读取json文件会快点所以在网络上搜索如何读取本地的json文件结果找到了下边的这样 var Ajax = function () { $.getJSON ("js/useri ...
js读取json文件片段中的数据
在html中利用js读取动态网站从服务器端返回的数据进行显示 1.js.html 页面需要引入执行jquery的js文件 <!DOCTYPE HTML PUBLIC "-//W3C ...
js 读取json文件_JavaScript 项目中常见配置文件介绍
原文地址:https://github.com/whinc/blog/issues/14 本文介绍一些前端项目的通用配置及相关资源,以便你了解项目中常见配置的含义以及配置方式. .gitignore ...
php json 循环输出html,我要用js从json文件中取值，并输出的html页面，有个问题
json文件有多个 0.json 1.json 2.json 3.json ... 现在的情况是js可以挨个读取json文件中的内容,但是每次读取新文件的时候之前的文件内容就没了,我想要加载新json ...
本地服务器json文件,从本地ftp服务器读取Json文件
我是存储在本地服务器中的名为File1.js的json文件.我想读取json文件的内容,并希望在其他文件中显示数据.我已经尝试使用JavaScript编码,但它不能正常工作.从本地ftp服务器读取Js ...
新手如何使用JavaScript读取json文件 v2.0
前言 3年前,我在纯小白时期写的一篇文章:新手如何使用JavaScript读取json文件至今仍时常有小伙伴点击. 如今自己在此知识领域已经有所成长,故重写一篇更高质量,更有帮助的文章,希望更有效的 ...
netcore读取json文件_.net core读取json格式的配置文件
在.Net Framework中,配置文件一般采用的是XML格式的,.NET Framework提供了专门的ConfigurationManager来读取配置文件的内容,.net core中推荐使用j ...
R读取json文件并转化为dataframe
R读取json文件并转化为dataframe 目录 R读取json文件并转化为dataframe R读取json文件把json转为dataframe

JS读取json 文件

JS读取json 文件相关推荐

最新文章

热门文章