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学习阶段性总结(2)--(X)HTML学习
Feb 03 Javascript
Jquery作者John Resig自己封装的javascript 常用函数
Nov 09 Javascript
jQuery 类twitter的文本字数限制带提示效果插件
Apr 16 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
Jul 09 Javascript
jQuery Ajax使用实例
Apr 16 Javascript
JS判断当前页面是否在微信浏览器打开的方法
Dec 08 Javascript
ReactNative实现图片上传功能的示例代码
Jul 11 Javascript
JavaScript使用FileReader实现图片上传预览效果
Mar 27 Javascript
浅谈实现vue2.0响应式的基本思路
Feb 13 Javascript
简单了解node npm cnpm的具体使用方法
Feb 27 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
Oct 25 Javascript
js实现旋转木马轮播图效果
Jan 10 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函数篇之掌握ord()与chr()函数应用
2011/12/05 PHP
基于PHP输出缓存(output_buffering)的深入理解
2013/06/13 PHP
php.ini 配置文件的深入解析
2013/06/17 PHP
PHP获取windows登录用户名的方法
2014/06/24 PHP
javascript中的对象和数组的应用技巧
2007/01/07 Javascript
JavaScipt基本教程之JavaScript语言的基础
2008/01/16 Javascript
实现web打印的各种方法介绍及实现代码
2013/01/09 Javascript
JavaScript解析URL参数示例代码
2013/08/12 Javascript
window.print打印指定div指定网页指定区域的方法
2014/08/04 Javascript
javascript实现时间格式输出FormatDate函数
2015/01/13 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
2015/10/09 Javascript
jQuery中的ready函数与window.onload谁先执行
2016/06/21 Javascript
Javascript数组循环遍历之forEach详解
2016/11/07 Javascript
利用jQuery解析获取JSON数据
2017/04/08 jQuery
javascript实现考勤日历功能
2018/11/29 Javascript
Python 匹配任意字符(包括换行符)的正则表达式写法
2009/10/29 Python
使用python搭建Django应用程序步骤及版本冲突问题解决
2013/11/19 Python
发布你的Python模块详解
2016/09/15 Python
PyCharm搭建Spark开发环境实现第一个pyspark程序
2019/06/13 Python
10个Python面试常问的问题(小结)
2019/11/20 Python
从训练好的tensorflow模型中打印训练变量实例
2020/01/20 Python
jupyter notebook插入本地图片的实现
2020/04/13 Python
在pycharm中创建django项目的示例代码
2020/05/28 Python
pytorch判断是否cuda 判断变量类型方式
2020/06/23 Python
x-ua-compatible content=”IE=7, IE=9″意思理解
2013/07/22 HTML / CSS
Ray-Ban雷朋美国官网:全球领先的太阳眼镜品牌
2016/07/20 全球购物
英国领先的办公用品供应商:Viking
2016/08/01 全球购物
迪卡侬中国官网:Decathlon中国
2020/08/10 全球购物
Linux开机引导的步骤是什么
2015/10/19 面试题
最新的咖啡店创业计划书
2013/12/30 职场文书
企业领导对照检查材料
2014/08/20 职场文书
就业推荐表院系意见
2015/06/05 职场文书
小学班主任研修日志
2015/11/13 职场文书
nginx限制并发连接请求数的方法
2021/04/01 Servers
Django+Celery实现定时任务的示例
2021/06/23 Python
多人盗宝《绿林侠盗》第三赛季4.5上线 跨平台实装
2022/04/03 其他游戏