当前位置: 首页 > 知识库问答 >
问题:

将JSON从thingspeak显示到HTML

谭翰海
2023-03-14

这是两年前做的,一直工作到今天

它以前从thingspeak上的JSON获取数据并将其显示给我

我需要帮助来了解发生了什么以及如何修复它

<html>
<head>
<script>
var request = new XMLHttpRequest();
request.open('GET', 'https://api.thingspeak.com/channels/527143/feeds.json? 
api_key=I6AD9OVB2SXX03HC&results=1', true);

request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    var data = JSON.parse(request.responseText);
    var dia = date.getDate();
    var mes = date.getMonth();
    mes++;
    var ano = date.getFullYear();
    var hora = date.getHours();
    var minuto = date.getMinutes();
    document.getElementById("camb").innerHTML = "Câmbio Dólar: R$ " + data.feeds[0].field1 +  " | 
    Atualizado em " + dia + "/" + mes + "/" + ano + " às " + hora + ":" + minuto;
    } else {
    // We reached our target server, but it returned an error
     }
     };

    request.send();
    </script>
    </head>
    <body>
    <div  width = "100%" id="camb" style="font-size:15px; text-align:left; color: white; margin- 
     left: -300px; background-color: red; border-left: 300px solid red; border-bottom: 5px solid red; 
     border-top: 300px solid red; overflow: hidden;  margin-top: -300px; font-family: Brandon, 
     Grotesque, sans-serif;"></div>
  </body>
</html>

共有1个答案

逑何平
2023-03-14

这样运行它,然后查看您的控制台。看起来您可能通过美化器或其他东西运行了代码,它改变了换行符/破坏了您的代码。

你会发现你和CORS有问题。解决此问题的一个好方法是https://github.com/rob--w/cors-anywhere/

<html>
<head>
<script>
var request = new XMLHttpRequest();
var urlHere = "https://api.thingspeak.com/channels/527143/feeds.json?";
    urlHere = urlHere + "pi_key=I6AD9OVB2SXX03HC&results=1";
console.log(urlHere);
request.open('GET', urlHere, true);

request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    var data = JSON.parse(request.responseText);
    var dia = date.getDate();
    var mes = date.getMonth();
    mes++;
    var ano = date.getFullYear();
    var hora = date.getHours();
    var minuto = date.getMinutes();
    document.getElementById("camb").innerHTML = "Câmbio Dólar: R$ " + data.feeds[0].field1 +  " | Atualizado em " + dia + "/" + mes + "/" + ano + " às " + hora + ":" + minuto;
    } else {
    // We reached our target server, but it returned an error
     }
     };

    request.send();
    </script>
    </head>
    <body>
    <div  width = "100%" id="camb" style="font-size:15px; text-align:left; color: white; margin- 
     left: -300px; background-color: red; border-left: 300px solid red; border-bottom: 5px solid red; 
     border-top: 300px solid red; overflow: hidden;  margin-top: -300px; font-family: Brandon, 
     Grotesque, sans-serif;"></div>
  </body>
</html>
 类似资料:
  • 我是jQuery新手,在jsp中将数据从servlet显示到jqGrid时遇到了困难。我使用google gson将数据从ArrayList转换为字符串变量json。当我运行项目时,它在控制台中显示json数据,并显示一个空网格。 Student.java 学生数据服务。JAVA 我的servlet代码: ervlet.java 我的JSP页面: 滑溜的网格演示。jsp

  • 问题内容: 这是我正在处理的代码: 我想在列表视图上显示它们。您有任何教程可以帮助我入门吗?我是Web服务的新手。谢谢。 问题答案: 列表视图中最受欢迎的教学作品之一,可能会帮助您: - 拉维的博客 解析json之后要执行的步骤: 您可以使用jackson库用一行代码来解析json。 (单击此链接以获取有关对象映射教程的更多信息)

  • 我需要帮助将结果集值从servlet转发到jsp,而不使用JSTL实现 工作流程: 用户在输入框中输入值并单击搜索按钮 单击搜索时会调用servlet。servlet专注于数据库实现并将结果集值转发到请求所在的同一jsp页面。 问题:我的结果集大小是3,但仅表顶部的值就打印在我的jsp页面中。其余2个值缺失。我希望所有的值都打印在我的jsp页面中。 这是我的代码: Productlist.jsp

  • 我的文本文件包含的数据为:sample。txt 内存头1 1 NA设置字符串SRC代码 MEMHEAD 1 2 NA设置字符串memIdnum LGLNAME 1 5 NA先设置字符串 我已经创建了MyClassModel类,将AbstractTableModel扩展为: 通过这种方式,我从文件中检索数据。现在当我制作一个并使用。我得到一个。 继续: 文本文件数据显示在JTable中,但是JTab

  • 问题内容: 该代码非常简单,我不知道为什么它无法工作。 这是指向JSON文件http://webapp.armadealo.com/home.json的链接 这是使用getJSON的代码 我只希望代码显示整个JSON内容。 问题答案: 经过几个月的搜索,我找到了解决方案。因此,我在回答自己的问题。 当不支持JSON时,当我们坚持相同的原产地政策时,我们必须使用填充将JSON换行并使其成为JSONP