如何通过jQuery Ajax从搜索栏内容中拆分歌手名调用Deezer API？

阿华AIGC实验室

2026-5-14

嘿，这个需求挺实用的！想从用户的搜索输入里自动识别歌手名，不用单独加一个歌手搜索栏，其实有几种靠谱的方案，我给你拆解下：

方案1：基于预设歌手列表的简单匹配（快速落地）

如果你的应用主要服务于大众熟知的歌手，可以提前维护一个常用歌手名的列表，然后检查用户输入里是否包含这些歌手名。这种方式简单直接，不用依赖额外服务：

// 先定义常用歌手名列表（可以根据你的需求不断扩展）
const popularArtists = ["eminem", "taylor swift", "adele", "drake", "ariana grande"];

// 获取用户在搜索栏的输入，转小写并去除首尾空格
const userSearchInput = $("#search-bar").val().toLowerCase().trim();

// 遍历列表，匹配输入中的歌手名
let targetArtist = "";
for (const artist of popularArtists) {
  if (userSearchInput.includes(artist)) {
    targetArtist = artist;
    break; // 找到第一个匹配的歌手就停止，避免多个匹配的情况
  }
}

// 确认找到歌手名后，发起API请求
if (targetArtist) {
  const settings = {
    method: 'GET',
    crossDomain: true,
    // 用encodeURIComponent处理特殊字符，避免URL出错
    url: `https://deezerdevs-deezer.p.rapidapi.com/search?q=${encodeURIComponent(targetArtist)}`,
    headers: {
      "x-rapidapi-host": "deezerdevs-deezer.p.rapidapi.com",
      // 记得替换成你的RapidAPI密钥！
      "x-rapidapi-key": "your-rapidapi-key-here"
    }
  };

  $.ajax(settings).done(function (response) {
    // 这里处理返回的歌曲列表，比如渲染到页面上
    console.log("返回的歌曲数据：", response.data);
    // 举个简单的渲染例子
    $("#song-container").empty();
    response.data.forEach(song => {
      $("#song-container").append(`<div class="song-item">${song.title} - ${song.artist.name}</div>`);
    });
  }).fail(function(error) {
    console.error("API请求失败：", error);
    alert("获取歌曲列表失败，请稍后重试~");
  });
} else {
  alert("没识别到歌手名哦，可以试试输入更明确的内容，比如'eminem lose yourself'");
}

方案2：利用Deezer API的智能搜索（更精准）

其实Deezer的搜索API本身就有智能匹配能力，你可以先把用户的完整输入传进去搜索，拿到最匹配的歌手ID，再用这个ID去请求该歌手的全部歌曲列表。这种方式容错性更高，哪怕用户输入的是纯歌曲名，也能关联到对应的歌手：

const userSearchInput = $("#search-bar").val().trim();

// 第一步：用用户的完整输入搜索，获取匹配的歌手信息
const searchSettings = {
  method: 'GET',
  crossDomain: true,
  url: `https://deezerdevs-deezer.p.rapidapi.com/search?q=${encodeURIComponent(userSearchInput)}`,
  headers: {
    "x-rapidapi-host": "deezerdevs-deezer.p.rapidapi.com",
    "x-rapidapi-key": "your-rapidapi-key-here"
  }
};

$.ajax(searchSettings).done(function (searchResult) {
  if (searchResult.data.length === 0) {
    alert("没有找到相关的音乐内容~");
    return;
  }
  // 取搜索结果里第一个条目对应的歌手ID（通常是最匹配的）
  const targetArtistId = searchResult.data[0].artist.id;

  // 第二步：根据歌手ID请求该歌手的热门歌曲列表
  const artistSongsSettings = {
    method: 'GET',
    crossDomain: true,
    url: `https://deezerdevs-deezer.p.rapidapi.com/artist/${targetArtistId}/top`,
    headers: {
      "x-rapidapi-host": "deezerdevs-deezer.p.rapidapi.com",
      "x-rapidapi-key": "your-rapidapi-key-here"
    }
  };

  $.ajax(artistSongsSettings).done(function (songsResult) {
    console.log("该歌手的热门歌曲：", songsResult.data);
    // 渲染歌曲列表到页面
    $("#song-container").empty();
    songsResult.data.forEach(song => {
      $("#song-container").append(`<div class="song-item">${song.title}</div>`);
    });
  });
}).fail(function(error) {
  console.error("搜索请求失败：", error);
});

方案3：自然语言处理API（进阶精准识别）

如果需要处理小众歌手或者更复杂的输入（比如“我想听周杰伦的晴天”这种带语气词的句子），可以集成NLP服务（比如百度智能云的分词API、Google Cloud Natural Language）来提取实体中的歌手名。不过这种方式需要额外的API密钥和少量成本，适合对识别精度要求极高的场景。