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 相关文章推荐
javascript右下角弹层及自动隐藏(自己编写)
Nov 20 Javascript
从数据库读取数据后将其输出成html标签的三种方法
Oct 13 Javascript
jQuery 生成svg矢量二维码
Aug 09 Javascript
jQuery实现移动端手机商城购物车功能
Sep 24 Javascript
jQuery select自动选中功能实现方法分析
Nov 28 Javascript
angularjs实现的前端分页控件示例
Feb 10 Javascript
Vue 实用分页paging实例代码
Apr 12 Javascript
Javascript防止图片拉伸的自适应处理方法
Dec 26 Javascript
微信小程序实现折叠展开效果
Jul 19 Javascript
js实现导航跟随效果
Nov 17 Javascript
通过实例学习React中事件节流防抖
Jun 17 Javascript
JavaScript中的Proxy对象
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
PHP文件锁定写入实例解析
2014/07/14 PHP
PHP获取POST数据的几种方法汇总
2015/03/03 PHP
学习php设计模式 php实现状态模式
2015/12/07 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
使用js正则控制input标签只允许输入的值
2013/07/29 Javascript
Area 区域实现post提交数据的js写法
2014/04/22 Javascript
JavaScript实现简单图片滚动附源码下载
2014/06/17 Javascript
node.js中的fs.readFileSync方法使用说明
2014/12/15 Javascript
js中函数声明与函数表达式
2015/06/03 Javascript
原生js获取元素样式的简单方法
2016/08/06 Javascript
详细谈谈AngularJS的子级作用域问题
2016/09/05 Javascript
JavaScript的new date等日期函数在safari中遇到的坑
2016/10/24 Javascript
Node.js模块全局安装路径配置方法
2018/05/17 Javascript
React 组件中的 bind(this)示例代码
2018/09/16 Javascript
使用post方法实现json往返传输数据的方法
2019/03/30 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
2019/04/28 Javascript
vue移动端实现手机左右滑动入场动画
2020/06/17 Javascript
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
基于JS实现视频上传显示进度条
2020/05/12 Javascript
JS实现躲避粒子小游戏
2020/06/18 Javascript
js轮播图之旋转木马效果
2020/10/13 Javascript
[56:46]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VP vs Effect
2018/04/01 DOTA
在Python中使用NLTK库实现对词干的提取的教程
2015/04/08 Python
Python 专题四 文件基础知识
2017/03/20 Python
利用Pandas 创建空的DataFrame方法
2018/04/08 Python
Python timer定时器两种常用方法解析
2020/01/20 Python
Python Dict找出value大于某值或key大于某值的所有项方式
2020/06/05 Python
PyCharm 2020.2 安装详细教程
2020/09/25 Python
html5小技巧之通过document.head获取head元素
2014/06/04 HTML / CSS
美国老牌主机服务商:iPage
2016/07/22 全球购物
名人演讲稿范文
2013/12/28 职场文书
园林技术个人的自我评价
2014/01/08 职场文书
给幼儿园老师的表扬信
2014/01/19 职场文书
营销部内勤岗位职责
2014/04/30 职场文书
酒会邀请函
2015/01/31 职场文书
PyCharm 安装与使用配置教程(windows,mac通用)
2021/05/12 Python