jQuery中读取json文件示例代码


Posted in Javascript onMay 10, 2013

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>

这里三水点靠木小编继续为大家分享一下,如果想加载后自动加载内容的写法(图片与超链接)

da.json

[
{ "img": "//img.jbzj.com/image/http.gif", "url":"https://3water.com/1" },
{ "img": "//img.jbzj.com/image/jbzj.gif", "url":"https://3water.com/2" },
{ "img": "//img.jbzj.com/image/tengxunyun.jpg", "url":"https://3water.com/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="//3water.com/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="//3water.com/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>

这样效果就出来了如下图所示就说明代码没问题

jQuery中读取json文件示例代码

Javascript 相关文章推荐
学习YUI.Ext第五日--做拖放Darg&amp;Drop
Mar 10 Javascript
JavaScript性能陷阱小结(附实例说明)
Dec 28 Javascript
JQuery for与each性能比较分析
May 14 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
Jun 04 Javascript
javascript强大的日期函数代码分享
Sep 04 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
Jan 26 Javascript
JavaScript实现时间倒计时跳转(推荐)
Jun 28 Javascript
BootStrap 可编辑表Table格
Nov 24 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
JS严格模式知识点总结
Feb 27 Javascript
详解vue表单——小白速看
Apr 08 Javascript
微信小程序bindtap事件与冒泡阻止详解
Aug 08 Javascript
Javascript级联下拉菜单以及AJAX数据验证核心代码
May 10 #Javascript
javascript级联下拉列表实例代码(自写)
May 10 #Javascript
jquery ui对话框实例代码
May 10 #Javascript
javascrip关于继承的小例子
May 10 #Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
May 10 #Javascript
解析瀑布流布局:JS+绝对定位的实现
May 08 #Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
May 08 #Javascript
You might like
UTF-8正则表达式如何匹配汉字
2015/08/03 PHP
php语言的7种基本的排序方法
2020/12/28 PHP
PHP面向对象继承用法详解(优化与减少代码重复)
2016/12/02 PHP
thinkPHP框架整合tcpdf插件操作示例
2018/08/07 PHP
JQuery 遮罩层实现(mask)实现代码
2010/01/09 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
jQuery Mobile 导航栏代码
2013/11/01 Javascript
jquery prop的使用介绍及与attr的区别
2013/12/19 Javascript
jquery实现焦点图片随机切换效果的方法
2015/03/12 Javascript
详解Bootstrap按钮
2016/01/04 Javascript
Javascript使用uploadify来实现多文件上传
2016/11/16 Javascript
Angular2平滑升级到Angular4的步骤详解
2017/03/29 Javascript
vue.js 实现点击展开收起动画效果
2018/07/07 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
2018/09/13 Javascript
在小程序中推送模板消息的实现方法
2019/07/22 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
2019/10/16 Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
2020/07/27 Javascript
[02:34]肉山说——泡妞篇
2014/09/16 DOTA
[49:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第二场 3月4日
2021/03/11 DOTA
Python实现计算最小编辑距离
2016/03/17 Python
python3中int(整型)的使用教程
2017/03/23 Python
Python3编程实现获取阿里云ECS实例及监控的方法
2017/08/18 Python
Python爬取十篇新闻统计TF-IDF
2018/01/03 Python
实例讲解Python3中abs()函数
2019/02/19 Python
详解python校验SQL脚本命名规则
2019/03/22 Python
python中自带的三个装饰器的实现
2019/11/08 Python
django 数据库 get_or_create函数返回值是tuple的问题
2020/05/15 Python
车辆安全检查制度
2014/01/12 职场文书
电大会计学自我鉴定
2014/02/06 职场文书
冰淇淋店的创业计划书
2014/02/07 职场文书
工艺工程师岗位职责
2014/03/04 职场文书
《英英学古诗》教学反思
2014/04/11 职场文书
2015年见习期工作总结
2014/12/12 职场文书
退休欢送会致辞
2015/07/31 职场文书
高中生物教学反思
2016/02/20 职场文书
带你了解CSS基础知识,样式
2021/07/21 HTML / CSS