[英]How to POST/GET/PATCH/DELETE in SensorThings API Using JavaScript/jQuery
[英]How to store SensorThings query result into a variable in JavaScript/jQuery
我想读从SensorThings服务器(事实体https://scratchpad.sensorup.com/OGCSensorThings/v1.0/由通过JavaScript / jQuery的使用GET方法),结果存储到一个名为件事变量,以便我可以在脚本的另一部分中使用变量。
这是我的代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Read Thing</title>
<link rel="stylesheet" href="main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<h1>Read Thing</h1>
<h2 id="thing_name"></h2>
<script>
var thing = $.ajax({
url: "https://scratchpad.sensorup.com/OGCSensorThings/v1.0/Things(1785996)",
type: "GET",
contentType: "application/json; charset=utf-8",
success: function(data){
console.log(data);
return data;
},
error: function(response, status){
console.log(response);
console.log(status);
}
});
</script>
</body>
</html>
在浏览器中运行它之后,得到的结果如下:
{@iot.id: 1785996, @iot.selfLink: "http://scratchpad.sensorup.com/OGCSensorThings/v1.0/Things(1785996)", description: "Thing Description 15", name: "Thing Name 16", properties: {…}, …}
@iot.id
:
1785996
@iot.selfLink
:
"http://scratchpad.sensorup.com/OGCSensorThings/v1.0/Things(1785996)"
Datastreams@iot.navigationLink
:
"http://scratchpad.sensorup.com/OGCSensorThings/v1.0/Things(1785996)/Datastreams"
HistoricalLocations@iot.navigationLink
:
"http://scratchpad.sensorup.com/OGCSensorThings/v1.0/Things(1785996)/HistoricalLocations"
Locations@iot.navigationLink
:
"http://scratchpad.sensorup.com/OGCSensorThings/v1.0/Things(1785996)/Locations"
description
:
"Thing Description 15"
name
:
"Thing Name 16"
properties
:
{Thing Property Name 16: "Thing Property Description 16", Thing Property Name 15: "Thing Property Description 15"}
__proto__
:
Object
基于该结果,我尝试进行一些查询:
>>> thing
{readyState: 4, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, …}abort: ƒ (a)always: ƒ ()complete: ƒ ()done: ƒ ()error: ƒ ()fail: ƒ ()getAllResponseHeaders: ƒ ()getResponseHeader: ƒ (a)overrideMimeType: ƒ (a)pipe: ƒ ()progress: ƒ ()promise: ƒ (a)readyState: 4responseJSON: {@iot.id: 1785996, @iot.selfLink: "http://scratchpad.sensorup.com/OGCSensorThings/v1.0/Things(1785996)", description: "Thing Description 15", name: "Thing Name 16", properties: {…}, …}responseText: "{"@iot.id":1785996,"@iot.selfLink":"http://scratchpad.sensorup.com/OGCSensorThings/v1.0/Things(1785996)","description":"Thing Description 15","name":"Thing Name 16","properties":{"Thing Property Name 16":"Thing Property Description 16","Thing Property Name 15":"Thing Property Description 15"},"Datastreams@iot.navigationLink":"http://scratchpad.sensorup.com/OGCSensorThings/v1.0/Things(1785996)/Datastreams","HistoricalLocations@iot.navigationLink":"http://scratchpad.sensorup.com/OGCSensorThings/v1.0/Things(1785996)/HistoricalLocations","Locations@iot.navigationLink":"http://scratchpad.sensorup.com/OGCSensorThings/v1.0/Things(1785996)/Locations"}"setRequestHeader: ƒ (a,b)state: ƒ ()status: 200statusCode: ƒ (a)statusText: "OK"success: ƒ ()then: ƒ ()__proto__: Object
>>> thing.responseJSON
{@iot.id: 1785996, @iot.selfLink: "http://scratchpad.sensorup.com/OGCSensorThings/v1.0/Things(1785996)", description: "Thing Description 15", name: "Thing Name 16", properties: {…}, …}
>>> thing.responseJSON["name"]
"Thing Name 16"
>>> var thing_name = thing.responseJSON["name"]
undefined
>>> thing_name
"Thing Name 16"
看来代码成功运行了。 但是,当我将查询插入脚本并尝试在控制台中显示输出时(我仅在此处显示script标记,其他行与上面的代码相同),例如:
<script>
var thing = $.ajax({
url: "https://scratchpad.sensorup.com/OGCSensorThings/v1.0/Things(1785996)",
type: "GET",
contentType: "application/json; charset=utf-8",
success: function(data){
console.log(data);
return data;
},
error: function(response, status){
console.log(response);
console.log(status);
}
});
var thing_name = thing.responseJSON["name"];
console.log("Thing Name: " + thing_name);
// I want to insert the variable into a h2 tag in the page
document.querySelector("#thing_name").innerHTML = thing_name;
</script>
我收到这样的错误:
Uncaught TypeError: Cannot read property 'responseJSON' of undefined
at read_thing.htm:36
(anonymous) @ read_thing.htm:36
read_thing.htm:27 {@iot.id: 1785996, @iot.selfLink: "http://scratchpad.sensorup.com/OGCSensorThings/v1.0/Things(1785996)", description: "Thing Description 15", name: "Thing Name 16", properties: {…}, …}
脚本似乎没有将结果成功存储到变量事物中 。 当我尝试在控制台中显示变量的内容时,输出未定义 。
因此,如何修改脚本以将结果转换为变量? 提前致谢。
干杯,
将脚本末尾附近的代码移动到ajax调用的success
方法中,如下所示:
<script>
var thing = $.ajax({
url: "https://scratchpad.sensorup.com/OGCSensorThings/v1.0/Things(1785996)",
type: "GET",
contentType: "application/json; charset=utf-8",
success: function(data){
console.log(data);
var thing_name = thing.responseJSON["name"];
console.log("Thing Name: " + thing_name);
// I want to insert the variable into a h2 tag in the page
document.querySelector("#thing_name").innerHTML = thing_name;
return data;
},
error: function(response, status){
console.log(response);
console.log(status);
}
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.