使用Javascript使用api_Javascript_Html_Xmlhttprequest

使用Javascript使用api

javascript html

使用Javascript使用api,javascript,html,xmlhttprequest,Javascript,Html,Xmlhttprequest,我一直在努力在HTML页面上呈现API请求返回的数据对象，但是它一直在HTML页面上显示string对象。另一个问题是，我无法在Javascript的API函数之外使用API请求返回的数据对象。请参阅下面的代码： API请求、API函数外部的console.logdata不起作用 HTML页面您需要传入回调函数来处理返回的数据 function do_request(cb, cb_fail) { var params = {}; $.ajax({ url: &

我一直在努力在HTML页面上呈现API请求返回的数据对象，但是它一直在HTML页面上显示string对象。另一个问题是，我无法在Javascript的API函数之外使用API请求返回的数据对象。请参阅下面的代码：

API请求、API函数外部的console.logdata不起作用 HTML页面

您需要传入回调函数来处理返回的数据

function do_request(cb, cb_fail) {
    var params = {};

  $.ajax({
    url:
      "https://failteireland.azure-api.net/opendata-api/v1/attractions?" +
      $.param(params),
    beforeSend: function (xhrObj) {
      // Request headers
      xhrObj.setRequestHeader(
        "Ocp-Apim-Subscription-Key",
        "ef4ed92186214c868a59d97c3b353661"
      );
    },
    type: "GET",
    // Request body
    data: "{body}",
  })
    .done(cb)
    .fail(cb_fail);
}

function cb(data) {
    // you now have access to the data here
    document.getElementById("data").innerHTML = JSON.stringify(data.results)

}

function cb_fail(error) {
    console.log(error)
}

do_request(cb, cb_fail)

永远不要发布真正的API密钥。不要在一个问题中问多个问题。根据它的名称数据。结果将是一个内容列表->使用循环。API响应是一个对象数组，而不是HTML。将其设置为innerHTML将其强制为一个字符串，该字符串将为您提供[object object]、[object object object]、[object object object]、…欢迎您：再次链接，以防它在下面消失：您刚刚重构了OP的代码，但没有解决输出API结果的两个问题中的任何一个，访问异步进程的结果operation@ChrisG回调函数可以访问api结果并正确处理来自异步操作的数据；但是OP询问如何访问回调外部的数据。这是一个关于异步代码的常见初学者问题，没有很好的答案，而您的答案实际上根本没有回答，因为您仍然在访问回调中的数据；您所做的只是将其移动到一个外部函数。听起来您必须这样做，这也是错误的。@ChrisG$.ajax返回什么？除了传递成功/错误函数外，您建议如何处理响应？不需要做任何事情，但通常有一些常见的可接受的实现。主要问题：必须通过在响应数组上循环并创建列表项或div或基于元素的任何东西来处理响应数组。OP的第二个问题是关于如何在$.ajax回调之外使用API结果，不管它们的实现有多精确，这完全是离题的，但您的答案所涉及的唯一一件事是这样回答的

<html>
  <head>
    <title>JSSample</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src="main.js"></script>
  </head>
  <body>
    <div id="data"></div>
  </body>
</html>

function do_request(cb, cb_fail) {
    var params = {};

  $.ajax({
    url:
      "https://failteireland.azure-api.net/opendata-api/v1/attractions?" +
      $.param(params),
    beforeSend: function (xhrObj) {
      // Request headers
      xhrObj.setRequestHeader(
        "Ocp-Apim-Subscription-Key",
        "ef4ed92186214c868a59d97c3b353661"
      );
    },
    type: "GET",
    // Request body
    data: "{body}",
  })
    .done(cb)
    .fail(cb_fail);
}

function cb(data) {
    // you now have access to the data here
    document.getElementById("data").innerHTML = JSON.stringify(data.results)

}

function cb_fail(error) {
    console.log(error)
}

do_request(cb, cb_fail)