Question

这是我在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页面的一小部分，它包含更多元素。我想要做的是在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页面，因为我不知道需要处理的项目编号。

感谢任何帮助！

由于迈克尔

Answer 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>

希望这段代码能够正常运作。

Answer 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));
    }
});

感谢您的帮助！

干杯迈克尔

从REST GET响应显示HTML页面

2 个答案: