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的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。