javascript - 在 Javascript 中进行 API 调用 - 每次点击都会进行新的调用

Question

这是我想要实现的目标:

我的网页上有一个元素，我们称之为 Storm
每次用户点击 storm 链接时，我想要以下内容:

• 执行预定义参数的 API 调用，但将 storm 字符串作为其中之一
• 将结果(API 生成 JSON 文件)存储在某处
• 使用一种或另一种方法解析结果。

我解析返回的 JSON 没有问题，但我想知道如何执行前两个步骤。注意:我使用 JS 的次数多于 jQuery，但我在这方面不是纳粹分子。

非常感谢您的帮助。

编辑:谢谢@ema
我有一个 XHR 模型，附在此处。您能否帮我确定必须在哪里添加 API url(根据我的理解，第一个问号之前的内容)，以及如何向其中添加预定义参数和自定义参数(一个字符串，包含例如 Storm )？

再次感谢

function XHR(url, method, data, onsuccess, onfailure, onprogress, onload, onabort) {
var request = new XMLHttpRequest();
// Ten seconds is ought to be enough for anybody.
var xhrtimeout = setTimeout(onfailure, 10000);
request.addEventListener("progress", onprogress, false);
request.addEventListener("load", onprogress, false);
request.addEventListener("error", onfailure, false);
request.addEventListener("abort", onabort, false);
request.addEventListener("readystatechange", function (e) {
  if (request.readyState == 4) {
    if (request.status == 200) {
      clearTimeout(xhrtimeout);
      onsuccess(request.responseText);
   } else {
    onfailure(e);
   }
 }
});

 request.open(method, url, true);
 request.send(data);
}


function getJSONAndParse(url, allDone) {
  XHR(url, "GET", null, function(data) {
    allDone(JSON.parse(data));
  }, function() {
    alert("error");
 });
}

getJSONAndParse("http://lalala.com/json", function(parsedJSON) {
  alert(parseJSON[0].name);
  console.log(parseJSON);
});

Answer 1

您可以使用 XMLHttpRequest，如下所示:

var r = new XMLHttpRequest();
r.open("POST", "api/url", true);
r.onreadystatechange = function () {
  var json = r.responseText;
  // parse your json here
};
r.send("storm=value_of_storm&another_param=value_of_whatever");

HTH