正在执行API capstone项目，无法从文本输入中检索值

Question

这里的第一篇文章。

(请原谅这里的CSS，这是一个正在进行的工作)

下面是我的https://repl.it/@Johnmexico/BlandElegantOrigin-1 -it：

我会尽我所能地总结。我在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>

现在，如果我硬编码它和艺术家，比如“德雷克”而不是${artistName}，我就得到了我想要的，目前排名前十的德雷克歌曲。如果我输入一个艺术家并提交我的原始代码(它只返回整个数据库中的前10首歌曲，而不考虑任何参数。

所以我的问题是，如何正确地将输入中的值放入，并使用它从API中获取信息？(例如"2pac“或任何其他艺术家)，因为很明显，我现在所做的不是正确的方法。

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

谢谢你里卡多。

Answer 1

主要的问题是

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

在页面首次加载时运行。因此，您可以将"query“文本框中的任何内容的值赋给artistName。然后，当您键入新值时，该变量不会更新。您需要做的是在fetchAPIList()函数运行时询问框的值，然后在URL中使用它。

第二个问题是，当表单为submitted...but时，运行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("");
    });
});

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