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 相关文章推荐
htm调用JS代码
Mar 15 Javascript
js判断样式className同时增加class或删除class
Jan 30 Javascript
jQuery实现360°全景拖动展示
Mar 18 Javascript
简易的投票系统以及js刷票思路和方法
Apr 07 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
Jan 04 Javascript
JS中SetTimeout和SetInterval使用初探
Mar 23 Javascript
基于JavaScript实现瀑布流效果
Mar 29 Javascript
axios发送post请求,提交图片类型表单数据方法
Mar 16 Javascript
微信小程序与后台PHP交互的方法实例分析
Dec 10 Javascript
JavaScript键盘事件常见用法实例分析
Jan 03 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
Jul 20 Javascript
JavaScript字符串转数字的简单实现方法
Nov 27 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
phpmyadmin安装时提示:Warning: require_once(./libraries/common.inc.php)错误解决办法
2011/08/18 PHP
探讨PHP使用eAccelerator的API开发详解
2013/06/09 PHP
php计算程序运行时间的简单例子分享
2014/05/10 PHP
PHP实现查询两个数组中不同元素的方法
2016/02/23 PHP
php 无限级分类 获取顶级分类ID
2016/03/13 PHP
自制PHP框架之模型与数据库
2017/05/07 PHP
PHP时间处理类操作示例
2018/09/05 PHP
实例讲解PHP表单
2020/06/10 PHP
PHP 超级全局变量相关总结
2020/06/30 PHP
JavaScript/jQuery 表单美化插件小结
2012/02/14 Javascript
javascript回车完美实现tab切换功能
2014/03/13 Javascript
javascript跨域的4种方法和原理详解
2014/04/08 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
2015/08/21 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
2015/08/26 Javascript
jQuery插件imgPreviewQs实现上传图片预览
2016/01/15 Javascript
JS中的eval 为什么加括号
2016/04/13 Javascript
[33:39]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第二局
2016/02/27 DOTA
两个使用Python脚本操作文件的小示例分享
2015/08/27 Python
python 连接各类主流数据库的实例代码
2018/01/30 Python
Python做智能家居温湿度报警系统
2018/09/25 Python
Python3字符串encode与decode的讲解
2019/04/02 Python
深入了解Python iter() 方法的用法
2019/07/11 Python
细说NumPy数组的四种乘法的使用
2020/12/18 Python
HTML5对手机页面长按会粘贴复制禁用的解决方法
2016/07/19 HTML / CSS
西班牙国家航空官方网站:Iberia
2017/11/16 全球购物
医院护士专业个人的求职信
2013/12/09 职场文书
作弊检讨书1000字
2014/02/01 职场文书
《会变的花树叶》教学反思
2014/02/10 职场文书
搞笑征婚广告词
2014/03/17 职场文书
酒店开业庆典主持词
2014/03/21 职场文书
体育系毕业生求职自荐信
2014/04/16 职场文书
银行主办会计岗位职责
2014/08/13 职场文书
幼儿园大班教学反思
2016/03/02 职场文书
新学期新寄语,献给新生们!
2019/11/15 职场文书
Python爬取科目四考试题库的方法实现
2021/03/30 Python
apache基于端口创建虚拟主机的示例
2021/04/24 Servers