当前位置:  编程技术>jquery

Jquery读取json文件的代码举例

    来源: 互联网  发布时间:2014-09-03

    本文导语:  json文件是一种轻量级的数据交互格式。一般在jquery中使用getJSON()方法读取。 函数原型: $.getJSON(url,[data],[callback]) url:加载的页面地址 data: 可选项,发送到服务器的数据,格式是key/value callback:可选项,加载成功后执行的回调...

json文件是一种轻量级的数据交互格式。一般在jquery中使用getJSON()方法读取。

函数原型:
$.getJSON(url,[data],[callback])

url:加载的页面地址
data: 可选项,发送到服务器的数据,格式是key/value
callback:可选项,加载成功后执行的回调函数

1、首先,建一个JSON格式的文件userinfo.json 保存用户信息。
 

[
{
"name":"张国立",
"sex":"男",
"email":"zhangguoli@"
},
{
"name":"张铁林",
"sex":"男",
"email":"zhangtieli@"
},
{
"name":"邓婕",
"sex":"女",
"email":"denjie@"
}
]

2、创建一个页面,用于获取JSON文件中用户的信息数据,并显示出来。
注意,需要引入外部jquery文件,本例中为:jquery-1.8.2.min.js。
 

代码示例:





getJSON获取数据_www.


#divframe{ border:1px solid #999; width:500px; margin:0 auto;}
.loadTitle{ background:#CCC; height:30px;}


$(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"]+"
";
strHtml += "性别:"+info["sex"]+"
";
strHtml += "邮箱:"+info["email"]+"
";
strHtml += ""
})
$jsontip.html(strHtml);//显示处理后的数据
})
})

})












    
 
 

您可能感兴趣的文章:

  • jQuery概述,代码举例及最新版下载
  • jquery onpropertychange键盘事件用法举例
  • jQuery使任意div随意隐藏的代码举例
  • Jquery更换主题同时刷新iframe页面的代码举例
  • jquery禁用右键方法举例
  • Jquery 过滤器(first,last,not,even,odd)用法举例
  • Jquery删除元素的代码举例
  • jquery显示、隐藏div的方法举例
  • jQuery动态获取系统时间的代码举例
  • Jquery 定时局部刷新的代码举例
  • Jquery 显示隐藏更多文本的代码举例
  • jQuery 操作下拉列表框的代码举例
  • Jquery 限制只能输入数字的代码举例
  • jquery插件jTimer jquery定时器的用法举例
  • Jquery验证Email格式是否合法的代码举例
  • Jquery节点操作(插入,复制,替换,删除)举例
  • jquery控制自动刷新的代码举例
  • Jquery验证用户名和密码的代码举例
  • jquery animate动画函数用法举例
  • jquery cookie插件的用法举例
  • jquery中get,post和ajax方法应用举例
  • Jquery 读取URL参数的方法
  • jquery.cookie() 方法的使用(读取、写入、删除)
  • jQuery中使用data()方法读取HTML5自定义属性data-*实例
  • 通过Jquery的Ajax方法读取将table转换为Json
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • 通过javascript库JQuery实现页面跳转功能代码
  • jquery代码-如何使用jQuery来解析xml
  • jquery代码-如何使用jQuery来检测右键和左键的鼠标单击两种情况
  • jQuery 禁用右键菜单的简单代码
  • jQuery页面加载完毕再执行代码多种方法
  • jquery的父子兄弟节点查找示例代码
  • JQuery实现元素屏幕居中显示的代码
  • jQuery 代码模块化 TerrificJS
  • 在myeclipse中如何加入jquery代码提示功能
  • jquery弹窗代码示例
  • Jquery在指定DIV加载HTML示例代码
  • jquery遍历checkbox代码与说明
  • JQUERY 设置SELECT选中项代码
  • jQuery获得内容和属性示例代码
  • jQuery的each终止或跳过示例代码
  • jquery代码-如何使用多个属性来进行过滤
  • 简单的代码实现jquery定时器
  • jquery捕捉回车事件的代码
  • jQuery实现回车键(Enter)切换文本框焦点的代码实例
  • jquery禁用右键方法举例 iis7站长之家
  • jquery 页面滚动到指定DIV的代码
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery鼠标动画插件 jquery-ahover
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery向导插件 Jquery Wizard Plugin
  • jQuery圆角插件 jQuery Corners
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin
  • jQuery日历插件 jQuery Week Calendar


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3