做一个 API 顶点项目，无法从文本输入中检索值

Posted 2023-05-09

【中文标题】做一个 API 顶点项目，无法从文本输入中检索值

【英文标题】：Doing an API capstone project, cannot retrieve value from text input

【发布时间】：2019-04-09 11:50:41

【问题描述】：

第一次发帖。

（请原谅这里的 CSS，这是一项正在进行的工作）

这是我的回复：https://repl.it/@Johnmexico/BlandElegantOrigin-1

我会尽力总结。我在 JS 文件的第 7 行声明了文本输入的值，并尝试将其插入我的 AJAX 以及第 22 行的 fetchAPIList 函数中。

JS：

const artistName = $('.query').val();

function getDataFromApiSongs(endpoint, callback) 
  $.ajax(
      data: Object.assign(
           
            apikey: APIKey, 
            format: 'json' 
          , 
          `q_artist=$artistName`
      ), 
      contentType: 'application/json', 
      type: "GET", 
      url: MusicAPI + endpoint
  )
  .done(callback);


function fetchAPIList()
    getDataFromApiSongs(`track.search?q_artist=$artistName&page_size=10&page=1&s_track_rating=desc`, (response) =>...

html：

        <fieldset>
            <form action=# role="form" onsubmit="fetchAPIList()">
                <label for="search-musixmatch" id="label">Find Songs by Artist</label>
                <input class="query" type="text" placeholder="Search for Artist">
                <input class="submit-button" type="submit">

            </form>

        </fieldset>

现在，如果我对它和艺术家（例如“drake”而不是 $artistName）进行硬编码，我会得到我正在寻找的内容，即目前排名前 10 的 Drake 歌曲。如果我输入一个艺术家并使用我的原始代码提交（它只返回整个数据库中的前 10 首歌曲，不考虑任何参数。

所以我的问题是，我如何正确放置输入中的值并使用它从 API 中获取信息？ （例如“2pac”或任何其他艺术家）因为显然，我现在所做的不是正确的做法。

PS，你必须在浏览器中使用允许 CORS 扩展，但我相信你们中的许多人已经有这样的插件。

谢谢你， 里卡多。

【参考方案1】：

主要问题是

const artistName = $('.query').val();

在您的页面首次加载时运行。因此，您将当时“查询”文本框中的任何值分配给artistName。当您键入新值时，该变量不会得到更新。您需要做的是在您的 fetchAPIList() 函数运行时询问该框的值是什么，然后在您的 URL 中使用它。

第二个问题是您在提交表单时运行 fetchAPIList() 函数......但您不会阻止表单的默认行为，即执行传统的整页回发到服务器。

把这两件事放在一起，结合你使用 jQuery 的事实，以及使用不显眼的事件处理程序（即在主脚本中声明的事件处理程序，而不是嵌入在 HTML 中）通常被认为是更好的做法，我们可以像这样重新排列代码：

HTML（这里的变化是表单不再有“onsubmit”，但它确实有一个“id”来识别它）：

<fieldset>
        <form action=# role="form" id="searchForm">
            <label for="search-musixmatch" id="label">Find Songs by Artist</label>
            <input class="query" type="text" placeholder="Search for Artist">
            <input class="submit-button" type="submit">

        </form>
</fieldset>

JS（将 getAPIList 函数更改为不显眼的事件处理程序，删除未使用的 watchSubmit 和 displaySongData 函数，重新定义 getDataFromApiSongs 函数以接受最新的 artistName 值）：

const MusicAPI = "https://api.musixmatch.com/ws/1.1/";
const APIKey= "a2870731fab086760a6e7e1a767ceb86";

function getDataFromApiSongs(endpoint, artistName, callback) 
  $.ajax(
      data: Object.assign( 
          apikey: APIKey, 
          format: 'json' , `q_artist=$artistName`), 
      contentType: 'application/json', 
      type: "GET", 
      url: MusicAPI + endpoint).done(callback);


//unobtrusive "submit" event handler written using jQuery syntax
$("#searchForm").submit(function(event) 
  event.preventDefault(); //prevent default postback behaviour
  var artistName = $(".query").val();
      getDataFromApiSongs(`track.search?q_artist=$artistName&page_size=10&page=1&s_track_rating=desc`, artistName, (response) =>
      const message = JSON.parse(response);
      console.log(message.body)
        const  message: body: track_list = [] = message;
        console.log(track_list);
        let songDOM = ''
        track_list.map((item) => 
            const track: track_name,artist_name, album_name  = item;
            songDOM += `<li><b>Title</b>: "$track_name" by $artist_name, <i>$album_name</i>`;
        );
        let songsList = document.getElementById('songsList')
        songsList.innerHTML = songDOM;
        $(".query").val("");
    );
);

更新的回复：https://repl.it/repls/GoodnaturedNoisyApplication