使用jQuery动态传递参数到YouTube API

我正在提出这样的YouTube API请求：

$.get("https://www.googleapis.com/youtube/v3/channels", {
    part: "contentDetails",
    id: "somestring",
    key: "MY-API-KEY"
} /*, ...*/ )

我有一个带有值id的隐藏字段。用户可以选择是否要使用id或forUsername。

如果我使用下面的jQuery代码，我会发现一个错误：

意外字符串

，从API参数中丢失，但在这种情况下，该值为id。

$.get("https://www.googleapis.com/youtube/v3/channels", {
    part: "contentDetails",
    $("#subtype").val(): $("#url").val(),
    key: "MY-API-KEY"
}, /*, ...*/ )

如何使用jQuery代码？

您可以使用新的ES6对象初始化器语法为此：

$.get("https://www.googleapis.com/youtube/v3/channels", {
    part: "contentDetails",
    [$("#subtype").val()]: $("#url").val(),
    key: "MY-API-KEY"
})

注意围绕计算属性名称的方括号。如果要支持不支持ES6的浏览器，请使用更简单的方法：

var params = {
    part: "contentDetails",
    key: "MY-API-KEY"
};
params[$("#subtype").val()] = $("#url").val();
$.get("https://www.googleapis.com/youtube/v3/channels", params);

您可以使用Promises ES6对象。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
  username / id:
  <select id="subtype">
    <option value="ForUsername">username</option>
    <option value="id">id</option> 
  </select>
  <br> Last name: <input type="text" id="url"><br>
  <button type="button" id="searchButton">Click Me!</button>
  <script>
    $("#searchButton").click(function() {
      var paramsChooseByUser = $("#subtype").val();
      var paramsValue = $("#url").val();
      $.get("https://www.googleapis.com/youtube/v3/channels", {
          part: "id",
          [paramsChooseByUser]: paramsValue,
          key: 'someValidKey'
        })
        .always(function(data) {
          console.log(data.responseJSON);
        });
    });
  </script>
</body>
</html>

相关内容

最新更新

热门标签：