在练习 Ajax 串接实作时,馒头计画中就推荐就找了几个实作作业,找有开放资源的网站(如:YouTube、Github、气象局),制作搜寻引擎取得资料。而在串接其他平台的资料,很重要的一点就是要练习看该平台所提供的官方文件,从提供的资料可以知道要怎麽取得所需要的资料、参数要如何放。必须说,一开始真的花满多的时间在看文件,不段尝试串接的参数,反覆查看取得的资料是否合乎需求。
取得授权:凭证
function getVideo() {
let value = $('#search-field').val();
let youtubeURL = "https://www.googleapis.com/youtube/v3/search";
$.ajax({
type: "GET",
url: youtubeURL,
data: {//将要放入网址的参数放在这
part:
'id,snippet',// 必填,把需要的资讯列出来
q: value,// 查询文字
maxResults: 5,// 预设为五笔资料,可以设定1~50
type: "video",
key: '放入申请的金钥'// 使用 API 只能取得公开的播放清单
},
dataType: "json",
success: function (data) {
//console.log(data);
let nextPageToken = data.nextPageToken;
let prevPageToken = data.prevPageToken;
//试着将收到的资料传入,并呈现於画面中
insertItems(data);
getBtn(data, prevPageToken, nextPageToken)
}, error: function (err) {
console.log('oh no');
}
});
}
网址放入参数
[JS] 使用 JavaScript 解析网址与处理网址中的参数(URL Parameters)
function insertItems(item) {
let output = '';
$.each(item.items, function (index, value) {
let videoId = item.items[index].id.videoId;
let videoTitle = item.items[index].snippet.title;
let description = item.items[index].snippet.description;
let thumbnailURL = item.items[index].snippet.thumbnails.high.url;//高解析度影片缩图
let channelTitle = item.items[index].snippet.channelTitle;
let publishedDate = item.items[index].snippet.publishedAt;
// 按钮
output += `<li><div class="list-left">
<img src=" ${thumbnailURL}"></div>
<div class="list-right">
<h3>
<a data-fancybox data-type="iframe" data-src="https://www.youtube.com/embed/${videoId}" "href="javascript:;"> ${videoTitle} </a></h3> <small>By <span class="cTitle"> ${channelTitle}</span> on ${publishedDate}</small>
<p> ${description} <p></div></li> <div classs="clearfix"></div>
`
$('#results').html(output);
});
};
(!prevPageToken)
没有上一页的tokendata-token="${nextPageToken}" data-query="${value}"
,用於後续抓取属性内容。function getBtn(value, prevPageToken, nextPageToken) {
console.log(nextPageToken)
if (!prevPageToken) {
var btnOutput = $(`<div class="button-container">
<button id="next-button" class="paging-button" data-token="${nextPageToken}" data-query="${value}" onclick="pressNext();"> Next Page</button></div>`
)
$("#buttons").append(btnOutput);
} else {
var btnOutput = $(`<div class="button-container"><button id="prev-button" class="paging-button" data-token="${prevPageToken}" data-query="${value}" onclick="pressPrev();"> Prev Page</button>
<button id="next-button" class="paging-button" data-token="${nextPageToken}" data-query="${value}" onclick="pressNext();">Next Page</button></div>`)
$("#buttons").append(btnOutput);
}
}
Youtube:Implementation: Pagination
//取得下一页的资料
function pressNext() {
let youtubeURL = "https://www.googleapis.com/youtube/v3/search";
let token = $('#next-button').data('token');
let value = $('#search-field').val();
$.ajax({
type: "GET",
url: youtubeURL,
data: {//将要放入网址的参数放在这
part:
'id,snippet',// 必填,把需要的资讯列出来
q: value,// 查询文字
pageToken: token,
maxResults: 5,// 预设为五笔资料,可以设定1~50
type: "video",
key: '放入申请的金钥'// 使用 API 只能取得公开的播放清单
},
dataType: "json",
success: function (data) {
console.log(data);
let nextPageToken = data.nextPageToken;
let prevPageToken = data.prevPageToken;
// 清空内容
$('#results').html('');
$('#buttons').html('');
//试着将收到的资料传入,并呈现於画面中
insertItems(data);
getBtn(data, prevPageToken, nextPageToken)
}, error: function (err) {
console.log('oh no');
}
});
}
token = $('#prev-button').data('token');
//前一页
function pressPrev() {
// 清空内容
$('#results').html('');
$('#buttons').html('');
let youtubeURL = new URL(`https://www.googleapis.com/youtube/v3/search?`);
let token = $('#prev-button').data('token');
let value = $('#search-field').val();
$.ajax({
type: "GET",
url: youtubeURL,
data: {//将要放入网址的参数放在这
part:
'id,snippet',// 必填,把需要的资讯列出来
q: value,// 查询文字
pageToken: token,
maxResults: 5,// 预设为五笔资料,可以设定1~50
type: "video",
key: '放入申请的金钥'// 使用 API 只能取得公开的播放清单
},
dataType: "json",
success: function (data) {
console.log(data);
let nextPageToken = data.nextPageToken;
let prevPageToken = data.prevPageToken;
// 清空内容
$('#results').html('');
$('#buttons').html('');
//试着将收到的资料传入,并呈现於画面中
insertItems(data);
getBtn(data, prevPageToken, nextPageToken)
}, error: function (err) {
console.log('oh no');
}
});
}
HTML5 自定义属性 data-* 和 jQuery.data 详解
2018.06.20
[技术分享] 什麽是 HTML 5 中的资料属性(data-* attribute)
使用fancyBox展示影片
使用iframe连结欲嵌入的外部影片连结
透过CDN方式连结fancybox套件
<!-- fancyBox -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<h3><a data-fancybox data-type="iframe" data-src="https://www.youtube.com/embed/${videoId}" "href="javascript:;"> ${videoTitle}
</a></h3>
$('[data-fancybox]').fancybox({
toolbar : false,
smallBtn : true,
iframe : {
preload : false
}
})
今天文章的练习来源: [jQuery] - 练习-Youtube Search Engine
<<: Day 17:今天来部署你的 Angular 应用程序吧!
>>: Android Studio初学笔记-Day14-Switch和Toggle Button
灵异现象 - 我是你的恶梦 Credit: 贾希大人不气馁! 灵感来源:UCCU Hacker 灵异...
1.版本 https://nodejs.org/en/ 下载LTS (长期稳定版本) 用10以上版本...
这边主要是纪录一下目前学习 Celery 的一些纪录,想要知道完整的 Celery 的介绍可以自行 ...
DBA Bootcamp 几天前,oncall DBA 接到请求支援的电话,状况是这样的… 有一个 ...
这篇将会综合前面的 GPIO 与 IIO 的知识,帮一个常见的红外线感测器 -- TCRC5000 ...