HTML 中的 Javascript 并显示 JSON 响应
[英]Javascript inside HTML and display JSON response
问题描述
我正在尝试使用 Ecobee API 并尝试编写一个网页，人们可以在其中获取我的应用程序的 PIN 码。 我必须遗漏一些东西，因为当我在 CodeRunner 中运行以下代码时没有任何反应。 有人可以指出我做错了什么吗？ 显然，我希望它格式化并使它看起来不错，但首先我需要能够检索数据。 太感谢了。
麦克风
<HTML>
<head>
<title>Ecobee API PIN TEST</title>
</head>
<body onload="PINCode();">
<script type="text/javascript">
function PINCode() {
apiKey = 'API_KEY'
// set all apiKey inputs to have apiKey value entered
$(".apiKey").each(function() {
$(this).val(apiKey);
});
var url = 'https://api.ecobee.com/authorize?response_type=ecobeePin&client_id=' + apiKey + '&scope=smartWrite';
$.getJSON(url, function(data) {
// set authCode to be code attribute of response
$("#authCode").val(data.code);
var response = JSON.stringify(data, null, 4);
$('#response1').html(response);
})
.error(function(jqXHR, textStatus, errorThrown) {
$('#response1').html("The following error was returned: <br><br>" + jqXHR.responseText)
});
}
</script>
<pre id="response1" class="code-json">(Response JSON will appear here...I hope.)</pre>
</body>
这是我在 Carsten 输入后的最新尝试。 现在我的文本字段得到一个值，但它是一个错误：{"readyState":0,"status":0,"statusText":"error"}
<HTML>
<head>
<title>Ecobee API PIN TEST</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function PINCode() {
apiKey = 'API_KEY'
// set all apiKey inputs to have apiKey value entered
$(".apiKey").each(function() {
$(this).val(apiKey);
});
var url = 'https://api.ecobee.com/authorize?response_type=ecobeePin&client_id=' + apiKey + '&scope=smartWrite';
$.getJSON(url,function(data) {
// set authCode to be code attribute of response
$("#authCode").val(data.code);
alert("JSON Ran")
var response = JSON.stringify(data, null, 4);
$('#response1').html(response);
})
.fail(function(jqXHR, textStatus) {
$('#response1').html("The following error was returned: <br><br>" + JSON.stringify(jqXHR) + "<p>Please Contact <b>M2 AV Consulting</b> at <a href=mailto:support@m2avc.com?subject='EcobeePINSupport'>support@m2avc.com</a>")
console.log(textStatus);
});
})
</script>
<pre id="response1" class="code-json">(Response JSON will appear here...I hope.)</pre>
</body>
</HTML>
2 个解决方案
解决方案1
0 已采纳 2021-06-26 07:55:32
您将不得不实际调用您的函数。 另一个问题是.error()在当前 jQuery 版本中不再作为延迟对象的方法存在：“jqXHR.success()、jqXHR.error() 和 jqXHR.complete() 回调方法是从 jQuery 3.0 开始删除”。 我用.fail()代替。
function PINCode() { apiKey='API_KEY' // set all apiKey inputs to have apiKey value entered $(".apiKey").each(function() { $(this).val(apiKey); }); var url = 'https://api.ecobee.com/authorize?response_type=ecobeePin&client_id=' + apiKey + '&scope=smartWrite'; $.getJSON(url, function(data) { // set authCode to be code attribute of response $("#authCode").val(data.code); var response = JSON.stringify(data, null, 4); $('#response1').html(response); }) .fail(function(jqXHR, textStatus) { $('#response1').html("The following error was returned: <br><br>" + JSON.stringify(jqXHR)) console.log(textStatus); }); } PINCode()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <pre id="response1" class="code-json">(Response JSON will appear here...I hope.)</pre>
解决方案2
0 2021-06-26 08:12:10
Carsten 的回答是正确的，但我想补充一点：
您可以使用 JQuery 的原生$(function PINCode() {...}) 。
它立即调用函数，同时还使用更快的$.ready 。
在此处阅读更多信息： onload() 和 $.ready 之间的区别？
javascript/html : 解析 JSON 响应
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.