webapi,jsonファイルについて少し勉強したので、YoutubeAPIを使ってみようと思い簡単なコードを書いてみました。
jqueryのgetJSONメソッドを使っています。
get.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="get.js"></script>
</head>
<body>
<div id="player"></div>
<div class="">
<input id="inputText" type="text" name="" value="">
//各種ボタンの設置
<button id="searchButton" type="button" name="button">検索</button>
<button id="nextButton" type="button" name="button">次へ</button>
<button id="prevButton" type="button" name="button">戻る</button>
<ul>
</ul>
</div>
</body>
</html>
get.js
$(function(){
//ページトークンの初期化
var pageToken = "";
var nextPageToken = "";
var prevPageToken = "";
//Youtube data api をjsonファイルで取得
function getJsonFile(){
$.getJSON(
'https://www.googleapis.com/youtube/v3/search?key={API Key}&part=id,snippet',
{q:$('#inputText').val(),
type:'video',
maxResults:50,
pageToken:pageToken
},
function(data){
$.each(data['items'],function(i,item){
$('ul').append('<li>' + item.snippet.title);
});
nextPageToken = data.nextPageToken;
prevPageToken = data.prevPageToken;
});
}
$('#searchButton').on('click',function(){
$('li').remove();
pageToken = "";
getJsonFile();
})
$('#nextButton').on('click',function(){
$('li').remove();
pageToken = nextPageToken;
getJsonFile();
})
$('#prevButton').on('click',function(){
$('li').remove();
pageToken = prevPageToken;
getJsonFile();
})
});