Question

总新手，第一个项目，我做得不太好。需要简单搜索显示查询标题的YouTube视频：

这是我的JS：

＆＃13;

$(function() {
  $('#search-term').submit(function(event) {
    event.preventDefault();
    var searchTerm = $('#query').val();
    getRequest(searchTerm);
  });
});

function getRequest(searchTerm) {
  var params = {
    part: 'snippet',
    key: '',
    q: query
  };
  url = 'https://www.googleapis.com/youtube/v3/search';

  $.getJSON(url, params, function(data) {
    showResults(data.Search);
  });
}

function showResults(results) {
  var html = "";
  $.each(results, function(index, value) {
    html += '<p>' + video.snippet.title + '</p>';
    console.log(video.snippet.title);
  });
  $('#search-results').html(html);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title>Youtube Project</title>
</head>

<body>
  <form id="search-term">
    Entry:
    <br>
    <input id="query" type="text">
    <br>
    <input type="submit" value="Submit">
  </form>
  <div id="search-results">
  </div>
</body>

</html>

＆＃13;

对我轻松，任何帮助表示赞赏，这里是jsfiddle： https://jsfiddle.net/jelane20/3hbrv12k/1/

Answer 1

知道了！

$(document).ready(function () {
    $('#search-term').submit(function (event) {
        event.preventDefault();
        var searchTerm = $('#query').val();
        getRequest(searchTerm);
    });
});

function getRequest(searchTerm) {
    var url = 'https://www.googleapis.com/youtube/v3/search';
    var params = {
        part: 'snippet',
        key: 'XXXXXX',
        q: searchTerm
    };
  
    $.getJSON(url, params, showResults);
}

function showResults(results) {
    var html = "";
    var entries = results.items;
    
    $.each(entries, function (index, value) {
        var title = value.snippet.title;
        var thumbnail = value.snippet.thumbnails.default.url;
        html += '<p>' + title + '</p>';
        html += '<img src="' + thumbnail + '">';
    }); 
    
    $('#search-results').html(html);
}

如何通过API创建youtube搜索

1 个答案: