Question

我试图通过 GET 方法通过 JavaScript / jQuery SensorThings 服务器（https://scratchpad.sensorup.com/OGCSensorThings/v1.0/）读取一个实体实体>并将结果存储到名为 thing 的变量中，以便我可以在脚本的另一部分中使用该变量。

这是我的代码：

<!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>        
        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: {…}, …}

似乎脚本没有成功地将结果存储到变量 thing 中。当我尝试在控制台中显示变量的内容时，输出为未定义。

那么，我应该如何修改我的脚本以将结果变为变量？提前谢谢。

干杯，

Answer 1

将脚本末尾附近的代码移动到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>

如何将SensorThings查询结果存储到JavaScript / jQuery

1 个答案: