使用jsonp获取Flickr相片信息

最新推荐文章于 2023-08-28 20:26:37 发布

myleemylee

最新推荐文章于 2023-08-28 20:26:37 发布

阅读量1.6k

点赞数

分类专栏： Javascript jQuery 文章标签： jsonp url json function 语言 jquery

本文链接：https://blog.csdn.net/myleemylee/article/details/6787790

版权

Javascript 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

jQuery

3 篇文章 0 订阅

订阅专栏

笔者使用jquery－1.6.2, 根据flickr提供的feed api封装了一个简易的调用flckr feed api的方法

代码如下：

flickr.js

(function(window,$,undefined){
	var flickr = {
		//支持的语言
		charset:{
			//德语
			'de-de':'de-de',
			//英语
			'en-us':'en-us',
			//西班牙语
			'es-us':'es-us',
			//法语
			'fr-fr':'fr-fr',
			//意大利语
			'it-it':'it-it',
			//韩语
			'ko-kr':'ko-kr',
			//西班牙语
			'pt-br':'pt-br',
			//繁体中文（香港）
			'zh-hk':'zh-hk'
		},
		//生成url
		makeUrl:function(param){
			var url = "http://api.flickr.com/services/feeds/";
			switch(param.type){
				//公开相片和视讯
				case "public":
					//指定feed的格式
					url+="photos_public.gne?format="+(param.format ? param.format : 'json');
					//指定的拥护id
					if(param.id) url+="&id="+param.id;
					//指定的多个用户的id，以逗号分隔
					if(param.ids) url+="&ids="+param.ids;
					//指定的多个标签id，以逗号分隔
					if(param.tags) {
						url+="&tags="+param.tags;
						//tagmode=all/any  严格匹配或者模糊匹配
						url+="&tagmode="+(param.tagmode ? param.tagmode : 'any');
					}
					//指定feed内容的语言，默认为en-us
					if(param.lang) url+="&lang="+param.lang;		
					break;
				//传回来自指定用户的自己人，朋友和家人的公开内容清单
				case "friends":
					//指定feed的格式
					url+="photos_friends.gne?format="+(param.format ? param.format : 'json');
					//为其取得朋友的相片和视讯的使用者的使用者id(required)
					if(param.user_id) url+="&user_id="+param.user_id;
					//显示每个自己人的多个项目(display_all=1)，而不是一个，预设为每个人显示一个项目
					if(param.display_all) url+="&display_all="+param.display_all;
					//仅显示朋友和家人的内容(friends=1),自己人除外，预设为显示来自所有自己人的内容
					if(param.friends) url+="&friends="+param.friends;
					//指定feed内容的语言，默认为en-us
					if(param.lang) url+="&lang="+param.lang;
					break;
				//某个使用者的公开最爱
				case "faves":
					//指定feed的格式
					url+="photos_faves.gne?format="+(param.format ? param.format : 'json');
					//使用者id(required)
					if(param.id) url+="&id="+param.id;
					//指定feed内容的语言，默认为en-us
					if(param.lang) url+="&lang="+param.lang;
					break;		
				//群组讨论区feed 传回指定群组中的最新讨论清单
				case "groups_discuss":
					//指定feed的格式
					url+="groups_discuss.gne?format="+(param.format ? param.format : 'json');
					//群组id(required)
					if(param.id) url+="&id="+param.id;
					//指定feed内容的语言，默认为en-us
					if(param.lang) url+="&lang="+param.lang;
					break;
				//群组分享区feed	传回最近增加至指定群组分享区的内容清单
				case "groups_pool":
					//指定feed的格式
					url+="groups_pool.gne?format="+(param.format ? param.format : 'json');
					//群组id(required)
					if(param.id) url+="&id="+param.id;
					//指定feed内容的语言，默认为en-us
					if(param.lang) url+="&lang="+param.lang;
					break;	
				//讨论区讨论feed 传回来自讨论区的最新主题清单
				case "forums":
					//指定feed的格式
					url+="forums.gne?format="+(param.format ? param.format : 'json');
					//指定feed内容的语言，默认为en-us
					if(param.lang) url+="&lang="+param.lang;
					break;
				//传回有关属于指定使用者的所有相片和相片集的最新回应清单										
				case "activity":
					//指定feed的格式
					url+="activity.gne?format="+(param.format ? param.format : 'json');
					//使用者id(required)
					if(param.user_id) url+="&user_id="+param.user_id;
					//指定feed内容的语言，默认为en-us
					if(param.lang) url+="&lang="+param.lang;
					break;
				//传回指定用户自己已回应的最新回应清单									
				case "comments":
					//指定feed的格式
					url+="photos_comments.gne?format="+(param.format ? param.format : 'json');
					//使用者id(required)
					if(param.user_id) url+="&user_id="+param.user_id;
					//指定feed内容的语言，默认为en-us
					if(param.lang) url+="&lang="+param.lang;
					break;
				default:
					url = false;
					break;
			}
			if(url) url+="&jsoncallback="+param.callback;
			return url;
		},
		//获取指定flckr咨询
		getFlickr:function(param){
			var url = flickr.makeUrl(param);
			$.ajax({ 
				url: url,
                dataType: 'jsonp'
            });
		}
	}
	window.flickr = flickr;
})(window,jQuery);

index.html

<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <title>iphone test</title>
    <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="flickr.js"></script>
    <script type="text/javascript">
    	function getMyPhotos(data){
    		$.each(data.items,function(i,item){
    			$("#imgs").append($("<img>").attr("src",item.media.m));
    		});
    	}
    	$(function(){
    		flickr.getFlickr({type:'public',callback:'getMyPhotos'});
    	});
    </script>
    <style>
        p{color:blue}
        #imgs{overflow:auto;}
    </style>
</head>
<body>
    <div id="imgs"></div>
</body>
</html>

哦耶，偷懒一计，不多些说嘛了，代码很简单。