Calling rest webservice using jquery ajax?

Question

I tried couple of tutorial to call rest web-service using jQuery ajax call, but I am not getting the response.

But When I directly hitting the url in browser I am getting the response ,but unable to get same json response using ajax call,always going in the error block. (tomcat is running on port 8888)

http://localhost:8888/WebService_2/rest/webservice

Index.jsp file.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
    </head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <body>
        <table>
            <tr>
                <td><input type="button" value="submit" id="submit"> </td>
            </tr>
        </table>
    </body>

    <script type="text/javascript">
        $(document).ready(function(){

            $("#submit").click(function(){
                $.ajax({
                    type: "GET",
                    dataType:"json",
                    contentType: "application/json; charset=utf-8",
                    url: "http://localhost:8888/WebService_2/rest/webservice",
                    success: function(data1) {
                        console.log("response:" + data1);
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        console.log(' Error in processing!');

                    }
                });
            });   
        });
    </script>
</html>

WebSerivce Class.

package com.app.rest;

import javax.ws.rs.GET;
import javax.ws.rs.Path;
import javax.ws.rs.Produces;
import javax.ws.rs.core.MediaType;

@Path("/webservice")
public class WebSerivce {

    @GET
    @Produces(MediaType.APPLICATION_JSON)
    public String getResponse(){
        return "Web Service Response Call " ;
    }
}

web.xml

<servlet>
    <servlet-name>jersey-serlvet</servlet-name>
    <servlet-class>com.sun.jersey.spi.container.servlet.ServletContainer</servlet-class>
        <init-param>
            <param-name>com.sun.jersey.config.property.packages</param-name>
            <param-value>com.app.rest</param-value>
        </init-param>
    <load-on-startup>1</load-on-startup>
</servlet>


<servlet-mapping>
    <servlet-name>jersey-serlvet</servlet-name>
    <url-pattern>/rest/*</url-pattern>
</servlet-mapping>

Imran khan · Accepted Answer · 2019-10-17 19:52:34Z

Got the answer after some google... I have used the google jar for JSON conversion

Pom.xml

<dependency>
    <groupId>com.google.code.gson</groupId>
    <artifactId>gson</artifactId>
    <version>2.2.4</version>
</dependency>

WebService.class

import java.util.ArrayList;
import java.util.List;
import javax.ws.rs.GET;
import javax.ws.rs.Path;
import javax.ws.rs.Produces;
import javax.ws.rs.core.MediaType;
import com.google.gson.Gson;
import com.google.gson.GsonBuilder;

@Path("/webservice")
public class WebService {

    @GET
    @Produces(MediaType.APPLICATION_JSON)
    public Object getResponse(){  
        //firstName,LastName,Age,Id
        Student std1 = new Student("ik","test",22,2);
        Student std2 = new Student("John","Vector",23,3);
        Student std3 = new Student("iks","Roy",25,4);
        List<Student> stuList = new ArrayList<Student>();
        stuList.add(std1);
        stuList.add(std2);
        stuList.add(std3);
        Gson gson = new GsonBuilder().create();
        return gson.toJson(stuList);
    }
}

Index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
    </head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <body>
        <form method="get">
            <table>
                <tr>
                    <td><input type="button" value="submit" id="submit"> </td>
                    <div id="data"></div>
                </tr>
            </table>
        </form>
    </body>

    <script type="text/javascript">
        $(document).ready(function(){
            var val = "";
            $("#submit").click(function(event){
                event.preventDefault();

                $.ajax({
                    type: "GET",
                    dataType:"json",
                    url:  "rest/webservice",
                    success: function(data) {
                        console.log("response:" + data);
                        $.each(data, function(j, pdata) {
                            val= val + "[ "+pdata.firstName +" " + pdata.lastName +"]";
                        });
                        $("#data").text(val);
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        console.log(' Error in processing! '+textStatus);
                    }
                });
            });
        });
    </script>
</html>

Collectives™ on Stack Overflow

Calling rest webservice using jquery ajax?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related