Spotify 搜索
目标:使用 jQuery、AJAX 和 Spotify API 制作音乐搜索应用程序。您将使用 Spotify 的搜索端点来搜索曲目(歌曲)。
最低要求
- 您的应用程序必须有一个表单来搜索曲目(歌曲)。此表单需要一个用于搜索关键字的输入字段。
- 当用户提交表单时,使用 jQuery 从表单输入中获取搜索关键字。
- 使用 AJAX 通过表单中的搜索关键字调用 Spotify 的搜索端点。
- AJAX 调用成功后,在页面上呈现搜索结果。您应该至少包含每个结果的曲目名称和艺术家姓名。
- 每次用户提交表单时,请从视图中清除以前的所有搜索结果。
奖金创意
或者,挑战自己,让项目走得更远!
- 在视图中每个搜索结果旁边显示曲目的专辑封面。提示:您会注意到,如果您尝试访问专辑封面但没有可用的专辑封面,您的应用程序将会崩溃。首先检查是否有可用的艺术品,以防止这种情况发生。
- Spotify 为我们提供了每首曲目的
preview_url
。为视图中的每个曲目创建一个播放按钮,在新选项卡中打开preview_url
(它将开始播放歌曲!)。 - 如果让用户知道在提交表单和获取页面数据之间的几毫秒内发生了一些事情,那就太好了。当表单提交时显示
loading.gif
(在images
目录中提供),并在从 Spotify 获取数据时隐藏它。 - 处理 Spotify 没有返回数据的情况。您需要让用户知道没有结果,而不仅仅是显示空白页面。
- 处理用户使用空关键字提交搜索的情况。检查提交此表单空白时控制台中的错误; Spotify 认为这是一个“糟糕的请求!”如果用户尝试提交空白表单,请不要搜索,而是提醒他们输入关键字。
入门
- 分叉此存储库,并将其克隆到您的计算机中。
- 使用您在 AJAX 请求标头中在课堂上获得的令牌,练习使用 Postman 或带有几个不同搜索关键字的
curl
查询 Spotify 的搜索端点。您需要在请求 URL 中设置type=track
。查看响应数据,并弄清楚如何访问特定曲目的曲目名称和艺术家姓名(这将涉及使用嵌套对象和数组访问 JSON 中的值)。
笔记!您的令牌每小时都会过期!是的,这太烦人了。确保在工作时使用此令牌生成器更新您的令牌。 - 一旦您对响应数据的结构感到满意,就可以在用户提交表单时使用 AJAX 对 Spotify 进行 API 调用。
- 首先通过
console.log
记录响应数据。完成该工作后,访问您想要显示的数据(曲目名称和艺术家姓名)。 - 如果您知道如何从结果中访问数据,请使用 jQuery 将其
append
到页面。提示:您需要使用 Array#forEach 迭代 Spotify 在响应数据中返回的所有曲目。
提交
- 当您进行代码更改时,请经常提交并推送到您的 GitHub 分支。
- 完成作业并将工作推送到 GitHub 后,从您的分支向原始存储库发出拉取请求。
资源
- jQuery.ajax()
- Spotify 搜索端点