Question

因此，我正在使用Spotify api开发程序，目前正在使用其示例代码来熟悉api。因此，现在，我试图将我的内容插入他们的内容中，以查看我想做的事情是否可行。因此，对于初学者来说，我需要从用户那里获得播放列表ID，因此，我需要向他们提供带有表单标签的播放列表ID。

<form onsubmit="MyKey()">
    Enter playlist ID:<br>
    <input type = "text" id = "MyKey" value = "">
    <input type = "button" value = "submit"/>
  </form>

然后调用此函数：

 <script>
  function MyKey(){
var playlist = document.getElementById('MyKey');
console.log(playlist);
 function getHashParams() {
      var hashParams = {};
      var e, r = /([^&;=]+)=?([^&;]*)/g,
          q = window.location.hash.substring(1);
      while ( e = r.exec(q)) {
         hashParams[e[1]] = decodeURIComponent(e[2]);
      }
      return hashParams;
    }

    var params = getHashParams();

var access_token = params.access_token,
refresh_token = params.refresh_token,
error = params.error;

console.log(access_token);
console.log(playlist);
document.getElementById('MyKey').addEventListener('submit',function() {
console.log(playlist);

$.ajax({
            url: 'https://api.spotify.com/v1/playlists/'+playlist+'/tracks?fields=items(track.id)',
            type: GET,
            headers: {
              'Authorization': 'Bearer ' + access_token
            },
            success: function(response) {
              console.log(response.items);
            }
        });
      },false);

  }
</script>

我放置了控制台日志，以查看我是否甚至正确地存储了变量，但事实并非如此。当我点击“提交”时，控制台上没有任何内容。所以我目前的理论是，当我点击Submit时，什么都不会发生，因为控制台日志会告诉我东西是未定义的。那么为什么我的脚本没有激活？感谢您的协助。此外，我拥有的表单位于脚本内部，所以我不知道这是否会影响任何内容，但我想它不会像在编程语言中那样可以从方法中调用方法。

Answer 1

主要错误在于HTML，而不是JavaScript。为了通过按钮提交表单，您需要设置要提交的类型，以便浏览器知道调用onsubmit函数。

您实际上需要获取输入的值，而不是元素本身。您通常不希望使用嵌套函数，因为嵌套函数会损害可读性。

如果您的URL格式正确并且播放列表ID /身份验证ID正确，那么一切都应正常工作。

有效的JavaScript：

function handleSubmit() {

    // Get the value of the element
    var playlist = document.getElementById('MyKey').value;

    var params = getHashParams();

    var access_token = params.access_token,
        refresh_token = params.refresh_token,
        error = params.error;

    console.log(access_token);
    console.log(playlist);

    $.ajax({
        url: 'https://api.spotify.com/v1/playlists/' + playlist + '/tracks?fields=items(track.id)',
        type: 'GET',
        headers: {
            'Authorization': 'Bearer ' + access_token
        },
        success: function (response) {
            // Handle response
            console.log(response.items);
        }
    });

    return false;
}

// Make sure your URL contains something along the lines of
// #access_token=123&refresh_token=abc
function getHashParams() {
    var hashParams = {};
    var e, r = /([^&;=]+)=?([^&;]*)/g,
        q = window.location.hash.substring(1);
    while (e = r.exec(q)) {
        hashParams[e[1]] = decodeURIComponent(e[2]);
    }
    return hashParams;
}

工作的HTML：

<form action="#" onsubmit="return handleSubmit();">
  Enter playlist ID:<br>
  <input type="text" id="MyKey" value="">
  <button type="submit">Submit</button>
</form>

javascript功能未激活

1 个答案: