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
于是效果出来了，如下图，说明代码没问题。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。