使用jquery ajax调用rest webservice？答案

【问题标题】：Calling rest webservice using jquery ajax?使用jquery ajax调用rest webservice？
【发布时间】：2015-04-13 07:28:44
【问题描述】：

我尝试了几个教程来使用 jQuery ajax 调用来调用 rest web-service，但我没有得到响应。

但是当我在浏览器中直接点击 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>

WebService 类。

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>

【问题讨论】：

标签： java jquery ajax web-services rest

【解决方案1】：

google了几遍才知道答案... 我已经使用 google jar 进行 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);
    }
}

索引.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>

【讨论】：

是输入WebSerivce类名的错字吗？