显示来自 REST GET 响应的 HTML 页面答案

【问题标题】：Display HTML page from REST GET response显示来自 REST GET 响应的 HTML 页面
【发布时间】：2018-06-15 22:47:50
【问题描述】：

这是我在 stackoverflow 中的第一篇文章，希望我的问题能得到答案。我对前端技术没有那么丰富的经验。所以我需要你的帮助来解决我的问题。

我开发了一个在 Tomcat 中运行的带有 REST 服务的小型应用程序。我想要做的是调用像http://localhost:8080/myApp/project/12345 这样的REST GET 服务。服务是这样的

@Path("/project")
public class ProjectService {

    private ProjectDAO projectDAO = new ProjectDAO();

    @GET
    @Path("{projectNumber}")
    @Produces({MediaType.APPLICATION_JSON, MediaType.APPLICATION_XML})
    public Project getProject(@PathParam("projectNumber") Integer projectNumber, 
                              @Context HttpServletResponse servletResponse) throws ApplicationException, IOException {
        servletResponse.sendRedirect("/project.html");
        return projectDAO.findProject(new Project(projectNumber));
    }

POJO 看起来像这样：

@XmlRootElement
public class Project {

    private Integer projectNumber;
    private String projectName;

    public Integer getProjectNumber() {
        return projectNumber;
    }

    @XmlElement
    public void setProjectNumber(Integer projectNumber) {
        this.projectNumber = projectNumber;
    }

    public String getProjectName() {
        return projectName;
    }

    @XmlElement
    public void setProjectName(String projectName) {
        this.projectName = projectName;
    }

我的 HTML 页面如下所示

<!DOCTYPE html> <html lang="en"> <head>
    <meta charset="UTF-8">
    <title>Display project</title>

    <script src="js/jquery-latest.js"></script>

</head>

<body> <h2 id="projectInfo"></h2> </body> </html>

这只是HTML页面的一个小sn-p，它包含更多的元素。我想要做的是在 id 为“projectInfo”的 h2 标记中显示项目信息。如您所见，我想使用 jquery。在我的 servlet 中，我查询数据库以获取在 REST 调用中传递的 id 的项目信息并返回 JSON 响应。所有这一切都完美无缺，查询工作正常，返回响应并将其重定向到 project.html。

我想知道的：

这是重定向到 project.html 以显示项目信息的正确方法吗？
如果是这样，如何获取servlet返回的响应数据（Project的JSON响应）并用jquery显示在project.html中的h2标签中？

还有一个提示，对http://localhost:8080/myApp/project/12345 的调用是来自不受我控制的外部工具的第一次调用。这个工具想做一些与项目相关的事情。所以不能先显示静态 HTML 页面，因为我不知道需要处理的项目编号。

感谢任何帮助！

谢谢迈克尔

【问题讨论】：

标签： jquery html json rest tomcat

【解决方案1】：

从您的 HTML 页面进行 AJAX 调用，如下所示。

<!DOCTYPE html> <html lang="en"> <head>
    <meta charset="UTF-8">
    <title>Display project</title>
    <script src="js/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$.ajax({
        "url" : "http://localhost:8080/myApp/project/12345",
        "type" : "GET",
        "success" : function(data) {              
                var projectData= JSON.stringify(data);
                $("#projectInfo").text(projectData.projectName);
        },
        "error" : function(response,error)
        {
            console.log("ERROR: "+JSON.stringify(response));
        }
    });
});
</script>
</head>
<body> <h2 id="projectInfo"></h2> </body> </html>

希望这个 sn-p 能正常工作。

【讨论】：

感谢您的建议。一般来说，这会起作用，我有许多与其他服务相关的其他 ajax 调用。但问题是我目前没有项目编号“12345”。我可以通过直接进入后端的 REST 调用接收它。

【解决方案2】：

好的，想了想，还是决定先调用project.html，带个参数。而不是直接调用REST服务http://localhost:8080/myApp/project/12345我做http://localhost:8080/project.html?projectNumber=12345 在 HTML 文件中，我根据 Veeresh 提出的解决方案实现了这一点。

var projectNumber = getUrlParameter("projectNumber");

if  (projectNumber === null) {
    $(location).attr("href","/projectError.html");
    return;
}

$.ajax({
    url: "/myApp/project/" + projectNumber,
    type: "GET",
    success: function (projectResponse) {
        var projectData = JSON.stringify(projectResponse);
        console.log("Response: " + projectData);
        $("#projectInfo").text(projectData.projectName);
    },
    error: function (response, error) {
        console.log("ERROR: " + JSON.stringify(response));
    }
});

感谢您的帮助！

干杯迈克尔

【讨论】：