2

セットアップしたSpringRESTサービスに単純な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呼び出しを使用すると、「エラー：[オブジェクトオブジェクト]」というエラーが発生します。

ただし、RESTClient Firefoxアドオンを使用してサービスにアクセスし、応答を取得できるため、コントローラーが正しくセットアップされていることはわかっています。問題はjQuery呼び出しの処理方法にあると思いますが、これは初めての試みです。 jQueryを使用しているので、何が問題なのかわかりません。

4

4 に答える 4

2

文字列リテラル"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);
    });
}
于 2012-12-28T01:33:52.730 に答える
2

JSON-jsのstringify()関数は次のように使用できます。

$.getJSON('http://localhost:8080/song-player/ajax', function(data) {
    alert('Ajax data' + JSON.stringify(data));
});
于 2012-12-28T02:47:42.520 に答える
2 
$('#ajax').val(response);

動作しません。これはdivです。使用する

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

それが機能しない理由loadAjaxです。getAjax他の人が指摘しているように、あなたの応答は有効なjsonではないため、getJSONは機能しません。

于 2012-12-28T03:19:58.803 に答える
1

他の人が不正なjsonについて指摘していることに加えて、私の問題は、JSONPで呼び出す必要のあるサービスをヒットしようとしたことに起因しているようです。

コールバックパラメーターで応答をラップするために、このブログ投稿に従うようにコントローラーを変更することになりました。

また、JSONPを期待するようにajax呼び出しを変更しました。

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

すべての助けに感謝します。

于 2012-12-28T14:51:52.880 に答える