东城做网站：用jQuery编写VimeoAPI即时搜索应用程序

2019.05.27 东城做网站

154

网络开发者和互联网爱好者都非常喜欢在线视频服务。一个社交视频网站Vimeo是一个很好的例子，它展示了高清内容如何在全球范围内存储和传输。我喜欢你发现的质量与Vimeo上传和用户基础是非常了解广泛的各种主题。

东城做网站对于本教程，我想解释一下如何构建一个小型VimeoAPI即时搜索Web应用程序。我将使用jQuery和PHP后端创建前端。实际上，有一个完整的开发人员API，为程序员提供参考。我将继续解释更复杂的想法，以便您可以跟随我的源代码。

东城做网站

初始文档概念

我将首先解释如何将HTML文档放在一起，以便它运行我们的前端Ajax函数。让我们包含对用于Ajax调用的最新jQuery库的引用。我还为我们的自定义API命令使用了另一个文件v.js。

在正文中，我有一个用于搜索查询的输入字段。这个#resultsdiv将包含所有的HTML输出直接进入我们的网页。与脚本相比，整个索引文档实际上非常小。我复制了下面的代码：

<!doctype html> <html> <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <title>Vimeo Instant Search</title>   <meta name="author" content="Jake Rocheleau">   <link rel="stylesheet" type="text/css" href="style.css">   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=McLaren">   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>   <script type="text/javascript" src="v.js"></script> <!--[if lt IE 9]>   <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div id="w"> <div id="top"> <h2>Vimeo Instant Search</h2> <input type="text" name="s" id="s" tabindex="1" placeholder="Search videos..."> </div> <div id="results"></div> </div><!-- /#w --> </body> </html>

内部结果div我们将包括带有视频内容的较小的div。这将引用视频标题、缩略图和上传者的姓名。CSS样式非常容易跟踪和快速阅读。我还包括了一些css重置和添加到我的style.css档案。

/** results **/ #results { display: block; } #results .v { display: block; float: left; position: relative; width: 225px; margin-right: 12px; margin-bottom: 22px; padding-bottom: 10px; } #results .v a.wrapping { display: block; width: 225px; } #results .v .details { display: block; } #results .v .details img.userpic { float: left; position: relative; padding: 2px; background: #fff; top: -2px; left: -7px; } #results .v .details h3 { display: block; position: relative; font-size: 1.55em; white-space: nowrap; overflow: hidden; left: -6px; margin-bottom: 2px; color: #737373; } #results .v .details .user { display: block; font-size: 1.1em; color: #333; left: -4px; white-space: nowrap; overflow: hidden; } #results .v .details .user a { font-weight: bold; }

PHP中的后端API开发

让我们现在跳到PHP的后端编码。之后，我们可以将前端接口和后端接口结合在一起，以使我们的Ajax化的Webapp。首先，我将下载一份官方Vimeo API包装器在PHP中。

我们东城做网站可以简单地将这个文件包含到我命名的后端PHP文档中ajax.php。我们在后端进行的任何调用都需要一个API公钥和秘密密钥。这些只是用于验证Web应用程序的长字符串散列。转到Vimeo的开发者页面注册一份新的申请。这个过程是快速的，不应该超过几分钟就能完成。

现在，我们可以开始为Ajax响应数据构建自定义PHP文件。我们将传递JSON内容，因为这是jQuery内部最容易循环的输出。下面是ajax.php中的前几行：

header('Content-type: application/json'); require_once('vimeo.php'); $key = "PUBLICKEY"; $secret = "SECRETKEY"; $query = $_POST['q']; $limit = 12; // number of videos to display for each search

这个header()函数用于确定我们提供的输出类型。还有$query变量还没有定义，但是我们将在JavaScript中创建这个变量。它将包含用户输入到表单字段的搜索字符串。

$vimeo = new phpVimeo($key, $secret); $response = $vimeo->call('vimeo.videos.search', array('per_page' => $limit, 'query' => $query, 'sort' => 'relevant')); $jarray = array();

现在，我们进入了更复杂的PHP逻辑循环。phpVimeo引用了我们从Gizub中包含的类文件。这使得数据访问更加容易，我们可以节省开发时间。这个$jarray变量目前只是一个空数组。它最终将包含来自搜索查询的12个完整视频的数据，然后被传递到JSON中。

循环遍历返回数据

有了所有的主要PHP设置，我们就可以进入返回内容。由于我们正在处理多个结果，这需要一个foreach循环来快速地传递所有相关数据。我们将在$jarray变量，该变量将对每个新条目重复。

foreach($response->videos->video as $v){   $videoinfo = $vimeo->call('vimeo.videos.getInfo', array('video_id' => $v->id));   $jarray[] = array(   "thumbnail" => $videoinfo->video[0]->thumbnails->thumbnail[1]->_content,   "url" => $videoinfo->video[0]->urls->url[0]->_content,   "title" => $videoinfo->video[0]->title,   "username" => $videoinfo->video[0]->owner->display_name,   "userurl" => $videoinfo->video[0]->owner->profileurl,   "userpic" => $videoinfo->video[0]->owner->portraits->portrait[0]->_content   ); } print_r(str_replace('\\/', '/', json_encode($jarray))); die();

此代码将通过从我们的>$response早些时候的数据。各$response->videos->video对象保存需要提取和保存的内部数据。这些数据特别包括视频缩略图、URL和标题，以及上传者的用户名、配置文件URL和照片。

最后一次print_r()函数以JSON格式将所有数据输出到页面。我们需要从输出中删除转义斜杠，这样才能更干净和更容易地对输出进行排序。最后，PHP脚本调用die()为了让Ajax知道我们已经使用异步连接完成了。

自定义jQuery即时搜索

因此，在前端和后端完成之后，让我们通过JavaScript将所有内容绑定在一起。我在外部文件v.js中编写代码，该文件与任何典型的jQuery文档一样开始。

$(document).ready(function(){   var s = $("#s"); // search input field   var c = $("#results"); // results container   var t; // timer    $("#s").keydown(function(e){     clearTimeout(t);     if (!args) { var args = []; }          if (e.which === 65 && (e.ctrlKey || e.metaKey)) {         // allow the user to ctrl+a or cmd+a to select text         // without calling a new search function     } else { t = setTimeout(function(){ vimeoSearch() }, 400);   } });

前几个变量是针对输入搜索字段、结果div和一个数字定时器的缩写。由于人们在打字时经常需要额外的时间，所以在调用API搜索之前，我们需要延迟一些时间。这是定时器变量与JavaScript耦合的目的setTimeout()方法。

针对搜索字段，我已经为任何事件设置了一个新的事件侦听器。.keydown()事件。每次用户输入一个新键时，我们将清除前一个定时器以重新启动并运行一个简单的if/etc子句。如果用户输入了CTRL+A或CMD+A，那么我们不会运行任何搜索。这与选择搜索输入中的所有文本相关，通常不构成新的搜索查询。

否则，用户输入了一些新文本，我们暂停了400毫秒，然后调用一个新函数vimeoSearch().

Ajax结果显示

在我的vimeoSearch()函数中，我们正在执行一些任务。首先，清空内容div，以防还有以前的搜索结果显示。然后，我们为查询字符串创建一个变量，并在等待结果时将加载器gif附加到页面中。

function vimeoSearch() { c.empty(); var q = s.val(); c.html('<img src="images/loader.gif" alt="loading..." id="loader">'); $.ajax({ type: 'POST', url: 'ajax.php', data: "q="+q, success: function(data){ $.each(data, function(i, item) { var code = '<div> <span><img src="'+data[i].userpic+'"> <h3>'+data[i].title+'</h3> <span>uploaded by <a href="'+data[i].userurl+'" target="_blank">'+data[i].username+'</a></span></span> <a href="'+data[i].url+'" target="_blank"><img src="'+data[i].thumbnail+'" alt="'+data[i].title+' video thumbnail"></a> </div>'; $("#loader").remove(); c.append(code); }); // end each loop }, error: function(xhr, type, exception) {  c.html("Vimeo Error: " + type);  }}); // end ajax call } // end vimeoSearch() function

整个功能看起来真的很长，但是没有太多的运动部件。最长的段位于.ajax()方法，其中我们定义了一些参数并设置了一个成功/失败回调函数。如果我们能ajax.php并获得一个成功的结果，然后我们需要循环遍历每个JSON值。

这可以通过jQuery的.each()循环放置在返回数据上。生成完整代码后，我们可以删除加载程序映像并追加所有新数据。否则，对于任何失败的搜索查询，我们都会在页面上显示一个解析错误。大多数代码相当简单，应该很容易遵循。

Instant Vimeo Search API with PHP and Ajax tutorial preview