使用jQuery Ajax调用REST Web服务？

Question

我尝试了几本教程，以使用jQuery ajax调用来调用其余的Web服务，但没有得到响应。

但是，当我直接在浏览器中访问url时，我得到响应，但是无法使用ajax调用获得相同的json响应，总是进入错误块。 （tomcat在端口8888上运行）

http：// localhost：8888 / WebService_2 / rest / webservice

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>
        <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类。

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>

Answer 1

一些谷歌后得到答案...我用谷歌罐进行JSON转换

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>

使用jQuery Ajax调用REST Web服务？

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-04-13 10:19:38

使用jQuery Ajax调用REST Web服务？

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-04-13 10:19:38

解决方案1
1 已采纳 2015-04-13 10:19:38