code-injection - 是否可以在我的 Squarespace 网站上显示 SeatGeek API 调用的数据？

Question

是否可以连接到 SeatGeek API在 Squarespace 网站上显示本地事件数据？

Squarespace API docs所有这些似乎都是针对与商业相关的目标。

我熟悉如何在移动应用程序上下文中连接到 SeatGeek API。但我不知道从 Squarespace 内连接到 API(除了用于商业的 API 之外)是否可行。

SeatGeek 将是 unofficial integration 。我已经在 squarespace 论坛上发帖了，但没有回复，所以在这里询问一下，看看是否有人知道这件事。

非常感谢您的帮助!

Answer 1

"Personal" plan tier 上方的 Squarespace 网站支持通过 Code Blocks 添加自定义 JavaScript和 Code Injection .

因此，如果 SeatGeek 支持通过 JavaScript 使用他们的 API(而且看起来他们确实这样做)，那么您就可以从 Squarespace 网站内获取数据。

在站点内的何处添加代码以及使用什么初始化方法将根据具体情况而有所不同。例如，因素包括:您使用的是 Squarespace 7.0 还是 7.1，以及您使用的模板是否支持 AJAX Loading并启用它。

但是，无论在哪里添加代码，使用什么初始化方法，在我看来，都是基于what I see here ，可以通过 JavaScript 从 SeatGeek 获取数据。 (从右上角的“代码片段”面板中选择“JavaScript > XMLHttpRequest”或“JavaScript > Fetch”，其中显示“>(Node.js)Unirest”默认情况下):

var data = null;

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function () {
    if (this.readyState === this.DONE) {
        console.log(this.responseText);
    }
});

xhr.open("GET", "https://seatgeek-seatgeekcom.p.rapidapi.com/events");
xhr.setRequestHeader("x-rapidapi-host", "seatgeek-seatgeekcom.p.rapidapi.com");
xhr.setRequestHeader("x-rapidapi-key", "SIGN-UP-FOR-KEY");

xhr.send(data);

或者，通过获取:

fetch("https://seatgeek-seatgeekcom.p.rapidapi.com/events", {
    "method": "GET",
    "headers": {
        "x-rapidapi-host": "seatgeek-seatgeekcom.p.rapidapi.com",
        "x-rapidapi-key": "SIGN-UP-FOR-KEY"
    }
})
.then(response => {
    console.log(response);
})
.catch(err => {
    console.log(err);
});

虽然根据具体情况有所不同，但在大多数情况下，您需要使用站点范围的代码注入(inject)区域，而不是代码块或页面级代码注入(inject)。然后，在 Squarespace 7.0 网站上，您需要将代码包装在:

window.Squarespace.onInitialize(Y, function() {
  // do stuff here
});

另一方面，对于 Squarespace 7.1 网站，通常会将代码包装在:

document.addEventListener('DOMContentLoaded', function() {
  // do stuff here
}, false);

最后，您需要考虑如何输出数据。您可以通过目标页面正文中的代码块添加 HTML 标记，也可以将标记作为 JavaScript 的一部分添加到页面。