用JQuery解析获取JSON数据
JSON 是一种比较方便的数据形式,下面使用$.getJSON方法,实现获得JSON数据和解析,都挺方便简单的。从http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=? 这个地址得到JSON数据 并且分析里面的结构,生成图片和相关链接等:
$(function(){
var url="http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?"
//使用getJSON方法取得JSON数据
$.getJSON(
url,
//处理数据 data指向的是返回来的JSON数据
function(data){
//生成标题和标题连接
var tit="<a href='"+ data.link +"'>"+data.title +"<\/a>";
$("h1").html(tit);
//出现在指定位置H1 内
$("#ginfo").find("p").eq(0).html(data.modified);
$("#ginfo").find("p").eq(1).html(data.generator);
var lis="";
//li 列表项目
$(data.items).each(function(i,ite){
//遍历JSON数据得到所需形式
lis+="<li>";
lis+="<a href='"+ ite.link +"'><img src='"+ite.media.m +"' title='"+ ite.title +"'><\/><\/a>";
lis+="<div>";
lis+=ite.description;
lis+="<\/div><\/li>";
})
$("ul").html(lis);
//将遍历出来的数据呈现在所需位置
$("li").hover(function(){$(this).addClass("hov")}, function(){$(this).removeClass("hov")});
}
)
})
HTML:
<div class="main">
<div class="ginfo" id="ginfo">
<h1></h1>
<p></p>
<p></p>
</div>
<ul>
</ul>
</div>
最后说一下JSON数据的格式,其实它就是个文本文件,可以方便的解析,也可以直接查看。
({
"title": "Recent Uploads tagged cat",
"link": "http://www.flickr.com/photos/tags/cat/",
"description": "",
"modified": "2009-08-03T01:50:45Z",
"generator": "http://www.flickr.com/",
"items" {
"title": "DSC06844",
"link": "http://www.flickr.com/photos/g_bugel/3783605340/",
"media": {"m":"http://farm3.static.flickr.com/2638/3783605340_a3cfc9eeb9_m.jpg"},
"date_taken": "2009-07-06T07:27:59-08:00",
"description": "<p><a href=\"http://www.flickr.com/people/g_bugel/\">g.bugel<\/a> posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/g_bugel/3783605340/\" title=\"DSC06844\"><img src=\"http://farm3.static.flickr.com/2638/3783605340_a3cfc9eeb9_m.jpg\" width=\"240\" height=\"180\" alt=\"DSC06844\" /><\/a><\/p> ",
"published": "2009-08-03T01:50:45Z",
"author": "nobody@flickr.com (g.bugel)",
"author_id": "38658309@N00",
"tags": "china cat feline beijing 2009 chinalab chinalab2009"
},{......});
用JQuery解析获取JSON数据的更多相关文章
- jQuery异步获取json数据的2种方式
jQuery异步获取json数据有2种方式,一个是$.getJSON方法,一个是$.ajax方法.本篇体验使用这2种方式异步获取json数据,然后追加到页面. 在根目录下创建data.json文件: ...
- jQuery AJAX获取JSON数据解析多种方式示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery通过ajax方法获取json数据不执行success
1.jquery通过ajax方法获取json数据不执行success回调 问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准 ...
- ajax获取json数据为undefined--原因解析
解决办法:var dataObj=eval("("+data+")");//转换为json对象 问题: 1. 碰到一个问题ajax成功获取json数据后,取值显 ...
- JQuery 获取json数据$.getJSON方法的实例代码
这篇文章介绍了JQuery 获取json数据$.getJSON方法的实例代码,有需要的朋友可以参考一下 前台: function SelectProject() { var a = new Array ...
- Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法,绑定,each循环,ajax获取json数据
jquery.tmpl.js 是一个模板js ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...
- android客户端从服务器端获取json数据并解析的实现代码
今天总结一下android客户端从服务器端获取json数据的实现代码,需要的朋友可以参考下 首先客户端从服务器端获取json数据 1.利用HttpUrlConnection /** * 从指定的U ...
- jquery通过ajax方法获取json数据不执行success回调
问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准写法,导致总是执行error回调方法 解决方案:使json格式务必符合下述 ...
- (转)android客户端从服务器端获取json数据并解析的实现代码
今天总结一下android客户端从服务器端获取json数据的实现代码,需要的朋友可以参考下 首先客户端从服务器端获取json数据 1.利用HttpUrlConnection 复制代码 ...
随机推荐
- EntityFramework数据持久化 Linq介绍
一.LINQ概述与查询语法 二.LINQ方法语法基础(重点) 三.LINQ聚合操作与元素操作(重点) 四.数据类型转换(重点) 一.LINQ概述与查询语法 1.LINQ(Language Integr ...
- Java实现 LeetCode 709 转换成小写字母(ASCII码处理)
709. 转换成小写字母 实现函数 ToLowerCase(),该函数接收一个字符串参数 str,并将该字符串中的大写字母转换成小写字母,之后返回新的字符串. 示例 1: 输入: "Hell ...
- Java实现 LeetCode 535 TinyURL 的加密与解密(位运算加密)
535. TinyURL 的加密与解密 TinyURL是一种URL简化服务, 比如:当你输入一个URL https://leetcode.com/problems/design-tinyurl 时,它 ...
- Java实现 蓝桥杯 算法训练 p1103
算法训练 P1103 时间限制:1.0s 内存限制:256.0MB 编程实现两个复数的运算.设有两个复数 和 ,则他们的运算公式为: 要求:(1)定义一个结构体类型来描述复数. (2)复数之间的加法. ...
- Java实现 LeetCode 377 组合总和 Ⅳ
377. 组合总和 Ⅳ 给定一个由正整数组成且不存在重复数字的数组,找出和为给定目标正整数的组合的个数. 示例: nums = [1, 2, 3] target = 4 所有可能的组合为: (1, 1 ...
- Java实现 LeetCode 56 合并区间
56. 合并区间 给出一个区间的集合,请合并所有重叠的区间. 示例 1: 输入: [[1,3],[2,6],[8,10],[15,18]] 输出: [[1,6],[8,10],[15,18]] 解释: ...
- Java实现 LeetCode 12 整数转罗马数字
12. 整数转罗马数字 罗马数字包含以下七种字符: I, V, X, L,C,D 和 M. 字符 数值 I 1 V 5 X 10 L 50 C 100 D 500 M 1000 例如, 罗马数字 2 ...
- java实现串逐位和(C++)
给定一个由数字组成的字符串,我们希望得到它的各个数位的和. 比如:"368" 的诸位和是:17 这本来很容易,但为了充分发挥计算机多核的优势,小明设计了如下的方案: int f(c ...
- 初学python笔记
一.关于python ① 由荷兰人Guido van Rossum(龟叔)于1989年圣诞节为打发无聊时间所编写的编程语言. ② python的特点:优雅 明确 简单.代码量少,运行速度快. 缺点:运 ...
- yum安装配置MySQL数据库
1.配置yum源 # 先安装wget yum install wget -y 2.下载mysql源安装包 wget http://dev.mysql.com/get/mysql57-commu ...