CODEWITHSUNDEEP
jqueryhtmljsonresttomcat
Michael
Michael

Reputation: 33

Display HTML page from REST GET response

this is my first post in stackoverflow and hopefully I get an answer for my question. I'm not that experienced with frontend techlogies. So I need your help to get an approach for my problem.

I have developed a small application with REST services which runs in Tomcat. What I want to do is to call a REST GET service like http://localhost:8080/myApp/project/12345. The service looks like this

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

The POJO looks like this:

@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;
    }

My HTML page looks like this

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

This is only a small snippet of the HTML page, it contains a lot more elements. What I want to do is to display the project information within the h2 tag with id "projectInfo". As you can see I want to use jquery. In my servlet I query the database to get the project information for the id passed in REST call and return a JSON response. All this works perfectly, the query works fine, the response is returned and it is redirected to project.html.

What I want to know:

  1. Is this the right approach to redirect to project.html to be able to display the Project information?
  2. If so, how can I get the reponse data returned by the servlet (JSON response of Project) and display in the h2 tag in project.html with jquery?

One more hint, the call to http://localhost:8080/myApp/project/12345 is the first call from an external tool which is not under my control. This tool wants to do some stuff related to the project. So it is not an option to display a static HTML page first as I do not know the project number which needs to be processed.

Any help is appreciated!

Thanks Michael

Upvotes: 1

Views: 7125

Answers (2)

Michael
Michael

Reputation: 33

OK, after thinking about the problem, again I decided to first call project.html with a parameter. Instead of directly calling the REST service http://localhost:8080/myApp/project/12345 I do http://localhost:8080/project.html?projectNumber=12345 In HTML file I have then implemented this, based on proposed solution from 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));
    }
});

Thanks for your help!

Cheers Michael

Upvotes: 0

Veeresham Tammali
Veeresham Tammali

Reputation: 436

Make AJAX call from your HTML page like below.

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

Hope this snippet will works.

Upvotes: 1

Related Questions