Ajax 调用 Spring 服务答案

【问题标题】：Ajax Call To Spring ServiceAjax 调用 Spring 服务
【发布时间】：2012-12-13 08:40:39
【问题描述】：

我正在尝试对我设置的 Spring REST 服务进行简单的 ajax 调用。

我的控制器定义如下：

@Controller
public class SongPlayerController {
    ....
    @RequestMapping(value = { "/ajax", "/ajax/" }, method = RequestMethod.GET)
    @ResponseBody
    public String ajax() {
        return "New Song URL";
    }
}

然后我有一个带有 ajax 请求的简单 html 页面：

<!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=ISO-8859-1">
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<title>Insert title here</title>

<script type="text/javascript">
    function loadAjax() {
        $.ajax({
            type : "GET",
            url : "http://localhost:8080/song-player/ajax",
            data : "text",
            success : function(response) {
                $('#ajax').val(response);
            },
            error : function(e) {
                alert('Error: ' + e);
            }
        });
    }

    function getAjax() {
        $.getJSON('http://localhost:8080/song-player/ajax', function(data) {
            alert('Ajax data' + data);
        });
    }
</script>
</head>
<body>
    <button type="button" onclick="loadAjax()">Ajax Call</button>
    <div id="ajax">This will be an ajax call.</div>
</body>
</html>

但是，使用 $.ajax 或 $.getJSON 都不会返回任何内容。使用 ajax 调用时，我收到错误“错误：[object Object]”。

但是，我知道我的控制器设置正确，因为我可以使用 RESTClient Firefox add-on 访问我的服务并获得响应，所以我认为问题在于我如何处理 jQuery 调用，但这是我的第一次尝试在使用 jQuery 所以我不知道它有什么问题。

【问题讨论】：

标签： java jquery ajax spring-mvc

【解决方案1】：

字符串文字 "New Song URL" 不是有效的 JSON。尝试返回这个：

@Controller
public class SongPlayerController {
    @RequestMapping(value = { "/ajax", "/ajax/" }, method = RequestMethod.GET)
    @ResponseBody
    public String ajax() {
        return "{\"url\":\"New Song URL\"}";
    }
}

然后按如下方式访问该值：

function getAjax() {
    $.getJSON('http://localhost:8080/song-player/ajax', function(data) {
        alert('Ajax data' + data.url);
    });
}

【讨论】：

【解决方案2】：

你可以使用JSON-js的stringify()函数如下：

$.getJSON('http://localhost:8080/song-player/ajax', function(data) {
    alert('Ajax data' + JSON.stringify(data));
});

【讨论】：

太糟糕了 data 在这种情况下不是有效的 json

【解决方案3】：

$('#ajax').val(response);

不会工作。这是一个div。使用

$('#ajax').text(response);

这就是loadAjax 不起作用的原因。 getAjax 不起作用，因为正如其他人指出的那样，您的响应不是有效的 json，因此 getJSON 将不起作用。

【讨论】：

【解决方案4】：

除了其他人对 malfomred json 的指出之外，我的问题似乎源于试图使用 JSONP 调用我的服务。

我最终修改了控制器以遵循 this blog post 以使用回调参数包装我的响应。

我还将我的 ajax 调用更改为期望 JSONP：

function loadAjax() {
        $.ajax({
            type : "GET",
            url : "http://localhost:8080/song-player/ajax.json",
            async : false,
            dataType: "jsonp",
            success : function(response) {
                            $('#ajax').text(response.streamUrl);
                alert('Success: ' + response);
            },
            error : function(e) {
                alert('Error: ' + e);
            }
        }).done(function(data) {
            console.log(data);
            console.log(data.streamUrl);
        });
    }

感谢大家的帮助。

【讨论】：