json文件是一种轻量级的数据交互格式。一般在jquery中使用getJSON()方法读取，具体示例代码如下，感兴趣的朋友可以参考下哈，希望可以帮助到你
json文件是一种轻量级的数据交互格式。一般在jquery中使用getJSON()方法读取。
$.getJSON(url，[数据],[回调])
网址：加载的页面地址
数据：可选项，发送到服务器的数据，格式是键/值
回拨：可选项，加载成功后执行的回调函数
1.首先建一个JSON格式的文件userinfo.json保存用户信息。如下：
[
{
姓名:张国立，
性:男，
电子邮件:张国立@123.com
},
{
姓名:张铁林，
性:男，
邮箱：“zhangtieli@123.com”
},
{
姓名:邓婕，
性:女，
电子邮件:解珍@123.com
}
]
2.其次建一个页面用于获取JSON文件里的用户信息数据，并显示
！DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www。w3。org/TR/XHTML 1/DTD/XHTML 1-过渡。 DTD
html xmlns= http://。w3。 org/1999/XHTML
头
meta http-equiv= Content-Type Content= text/html；charset=utf-8 /
titlegetJSON获取数据/标题
脚本类型= text/JavaScript src= js/jquery-1。8 .2 .量滴js /脚本
style type=text/css
# div frame { border:1px solid # 999；宽度：500像素边距：0自动；}。加载标题{背景：# CCC高度：30px}
/风格
脚本类型=文本/javascript
$(function (){
$(#btn ).单击（函数(){
$.getJSON(js/userinfo.json ，function (data){
var $ jsonTip=$( # jsonTip )；
var strHtml= 123
//存储数据的变量
$ JSON提示。empty()；
//清空内容
$.每个（数据，函数（信息索引，信息){
strHtml=姓名： info[ name ] br ；
strHtml=性别： info[ sex ] br ；
strHtml=邮箱： info[ email ] br ；
strHtml=hr
})
$ JSON提示。html(strHtml)；
//显示处理后的数据
})
})
})
/脚本
/头
身体
div id=divframe
div class="加载标题"
输入类型=按钮值=获取数据id=btn/
/div
div id=jsonTip
/div
/div
/body
/html
这里我们小编继续为大家分享一下，如果想加载后自动加载内容的写法（图片与超链接)
da.json
[
{ img ://img。jbzj。com/image/http。gif ， url:https://www.jb51.net/1 }，
{ img ://img。jbzj。com/image/jbzj。gif ， url:https://www.jb51.net/2 }，
{ img ://img。jbzj。com/image/腾讯云。jpg ， url:https://www.jb51.net/3 }
]
通过创建交互式、快速动态网页应用的网页开发技术获取json数据的实现代码
！DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www。w3。org/TR/XHTML 1/DTD/XHTML 1-过渡。 DTD
html xmlns= http://。w3。 org/1999/XHTML
头
meta http-equiv= Content-Type Content= text/html；charset=utf-8 /
标题通过创建交互式、快速动态网页应用的网页开发技术获取json数据的实现代码/标题
script type= text/JavaScript src=//www。jb51。net/jslib/jquery/jquery。量滴js /脚本
/头
身体
div id=ok/div
脚本
$(function () {
$.ajax({
类型： POST ，
数据类型： json ，
url: da.json ，
成功：功能（结果){
var str=
$.每个（结果，函数（索引，对象){
str= a href= obj[ URL ] target= _ blank img src= obj[ img ] //a ；
});
$(#ok ).追加(字符串);
}
});
});
/脚本
/body
/html
通过$.getJSON获取json的代码
！DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www。w3。org/TR/XHTML 1/DTD/XHTML 1-过渡。 DTD
html xmlns= http://。w3。 org/1999/XHTML
头
meta http-equiv= Content-Type Content= text/html；charset=utf-8 /
标题通过$.getJSON获取json的代码/标题
script type= text/JavaScript src=//www。jb51。net/jslib/jquery/jquery。量滴js /脚本
/头
身体
div id=ok/div
脚本
$(function(){
$.getJSON(da.json ，function(data){
var $ jsontip=$( # ok )；
var strHtml=//存储数据的变量
$ JSON提示。empty()；//清空内容
$.每个（数据，函数（信息索引，信息){
strHtml= a href= info[ URL ] target= _ blank img src= info[ img ] //a ；
})
$ JSON tip . html(strHtml)；//显示处理后的数据
})
})
/脚本
/body
/html
于是效果出来了，如下图，说明代码没问题。
