如何从服务器检索 JSON 数据答案

【问题标题】：How to and retrieving JSON data from a server如何从服务器检索 JSON 数据
【发布时间】：2017-04-18 15:36:22
【问题描述】：

我正在参加在线课程，我们要做的一件事就是打印出来自 localhost:8080/tasks 的 JSON 条目。当我去 localhost:8080 时，它应该在下面运行这段代码。但是，当我运行它时，我得到了这个响应：

白标错误页面此应用程序没有显式映射 /error，因此您将其视为后备。 2016 年 12 月 3 日星期六 19:04:16 EST 出现意外错误（类型=内部服务器错误，状态=500）。异常解析文档：template="tasks"，第 28 行 - 第 42 列

第 42 列是

如果（xmlHttp.readyState == 4 && xmlHttp.status == 200）

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head lang="en">

    <meta charset="UTF-8" />

</head>
<body>

    <h2>Tasks</h2>

    <!-- TODO: add the ability to list tasks -->
    <ul id="tasks">
    </ul>


    <form>
        <input type="text" name="name" id="name"/>
        <input type="button" onclick="addTask();" value="Add!"/>
    </form>

    <!-- the javascript has been embedded to the same site -->
    <script th:inline="javascript">
        // The URL to the application server that holds the tasks.
        var url = "localhost:8080/tasks";

        var xmlHttp = new XMLHttpRequest();
        xmlHttp.onreadystatechange = function() {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
        var response = JSON.parse(xmlHttp.responseText);
        var liElement = document.createElement("li");
        liElement.appendChild(document.createTextNode(response.name));
        document.querySelector("#tasks").appendChild(liElement);
        }

        xmlHttp.open("GET", url, true);
        xmlHttp.send(null);
        }

        function loadTasks() {
        }

        function addTask() {
        var name = document.querySelector("#name").value;
        if (!name) {
        return;
        }

        console.log(name);

        var http = new XMLHttpRequest();
        http.open("POST", url, true);
        http.setRequestHeader("Content-type", "application/json");
        var data = new Object();
        data.name = name;

        http.onreadystatechange = function () {
        if (http.readyState === 4) {
        if (http.status === 200) {
        addTaskToList(JSON.parse(http.responseText));
        }
        }
        }

        http.send(JSON.stringify(data));
        }


        function addTaskToList(task) {
        var liElement = document.createElement("li");
        liElement.appendChild(document.createTextNode(task.name));
        document.querySelector("#tasks").appendChild(liElement);
        }


        window.onload = function () {
        loadTasks();
        };
    </script>
</body>

为什么会这样？

任务：

    package sec.domain;

import java.util.UUID;

public class Task {

private String id;
private String name;

public Task() {
    this.id = UUID.randomUUID().toString();
}

public String getId() {
    return id;
}

public void setId(String id) {
    this.id = id;
}

public String getName() {
    return name;
}

public void setName(String name) {
    this.name = name;
}

任务控制器：

package sec.controller;
import java.util.ArrayList;
import java.util.List;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import sec.domain.Task;

@RestController
@RequestMapping("/tasks")
public class TaskController {

private List<Task> tasks;

public TaskController() {
    this.tasks = new ArrayList<>();
    Task fixme = new Task();
    fixme.setName("Fix me.");
    this.tasks.add(fixme);
}

@RequestMapping(method = RequestMethod.GET)
public List<Task> list() {
    return this.tasks;
}

@RequestMapping(method = RequestMethod.POST)
public Task add(@RequestBody Task task) {
    this.tasks.add(task);
    return task;
}

@RequestMapping(value = "/{id}", method = RequestMethod.DELETE)
public Task delete(@PathVariable String id) {
    Task t = this.tasks.stream().filter(task -> task.getId().equals(id)).findFirst().get();
    this.tasks.remove(t);
    return t;
}
}

【问题讨论】：

配置您的服务器以显示实际的错误消息。
问题出在服务器端，而不是客户端。
Slaks 我不知道该怎么做？你的意思是看json数据吗，它是：[{"id":"809b7e46-98b2-43a0-98ec-38d89f925a1e","name":"Fix me."}]
@yasgur99 请显示您正在使用的 html 模板（任务）。该错误表明您的模板无效。
@Xinzoop 我在问题中添加了它

标签： javascript spring thymeleaf

【解决方案1】：

看起来你错过了';'在结束时

    http.onreadystatechange = function () {
    if (http.readyState === 4) {
    if (http.status === 200) {
    addTaskToList(JSON.parse(http.responseText));
    }
    }
    }

【讨论】：

我改变了它什么也没做:(
你最后错过了

【解决方案2】：

Thymeleaf 需要有效的 XML，在您发布的行中，您有：

if (xmlHttp.readyState == 4 && xmlHttp.status == 200)

& 不是一个有效的 XML 字符，所以你需要像这样用 CDATA 包围你的 javascript：

<script>
// <![CDATA[

... javascript here ...    

// ]]>
</script>

或者用&amp;&amp;替换它们

【讨论】：