在 ajax 调用中出现解析错误，但数据已成功传递答案

【问题标题】：Getting a parse-error in ajax call but the data is getting passed successfully在 ajax 调用中出现解析错误，但数据已成功传递
【发布时间】：2016-10-12 20:29:59
【问题描述】：

所以我有一个基本形式，它需要一个地址，获取纬度/经度，然后我试图将纬度/经度值传递给我的 API。 API 正在获取变量，但在成功通过后，我的 ajax 调用中出现解析错误。

<form method="GET">
     <input id="address" type="text">
     <button id='searchRadius' type="submit">Search</button>
</form>

ajax 调用

$('#searchRadius').on('click', function (e) {

    var lati;
    var lng;
    var rad = 30;
    var address = $('#address').val();


    e.preventDefault(); 


    $.ajax({
        type: "GET",
        url: "http://www.mapquestapi.com/geocoding/v1/address?key=LIhb6pFxB7qAlFC4Aiul9rM9i7R5BcgB&location=" + address,
        beforeSend: function (xhr) {
            xhr.setRequestHeader("Accept", "application/json");
            xhr.setRequestHeader("Content-type", "application/json");
        },
        success: function postForm(response) {
            lati = response.results[0].locations[0].latLng.lat;
            lng = response.results[0].locations[0].latLng.lng;

            console.log(lati, lng, rad);

            $.ajax({
                url: contextRoot + "/map/radius",
                type: "GET",
                data: {"lati": lati},
                dataType: "json",
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("Accept", "application/json");
                    xhr.setRequestHeader("Content-type", "application/json");
                },
                success: function (data, status) {
                    console.log(data);

                },
                error: function (data, status) {
                    alert("bad api call");
                    console.log(status);
                }
            });
        },
        error: function (data, status) {
            console.log(data.errors);
        }}
    );
});

api调用

 @RequestMapping(value = "/radius", method = RequestMethod.GET)
    @ResponseBody
    public String radiusSearch(HttpServletRequest request, Map model) {

        String n1 = request.getParameter("lati");

        return "redirect: /";
    }

所以我得到参数“lati”但它不会重定向页面然后我在第二个 ajax 调用中得到一个错误。在传递变量之前，我需要 JSON.Stringify 吗？我确实需要将变量“lati”、“lng”、“rad”传递给 api，但我试图让它先使用一个。

【问题讨论】：

标签： javascript json ajax spring spring-mvc

【解决方案1】：

当您使用 Ajax 时，Spring 控制器假定返回文本、字符串或 json。为什么？

因为您的 Ajax 成功方法需要接收文本、字符串或 json。

这意味着您不能将重定向作为 Ajax 响应执行。

因此，如果您想返回 lati 变量的文本，只需执行以下操作：

@RequestMapping(value = "/radius", method = RequestMethod.GET)
@ResponseBody
public String radiusSearch(HttpServletRequest request, Map model) {

    String n1 = request.getParameter("lati");

    return n1;
}

如果你想返回几个参数，那么可以，json是一个不错的选择。

你可以使用jackson-databind jar轻松完成，你需要做的就是返回一个包含这3个变量的对象，当然你需要控制器上的@ResponseBody注解。

还有一件事，在您的客户端 Ajax 调用中，您需要标记您希望接收 json 类型。 datatype: "json"，像这样：

$.ajax({
        type: "GET",
        url: "http://www.mapquestapi.com/geocoding/v1/address?


        datatype: "json"



key=LIhb6pFxB7qAlFC4Aiul9rM9i7R5BcgB&location=" + address,
        beforeSend: function (xhr) {
            xhr.setRequestHeader("Accept", "application/json");
            xhr.setRequestHeader("Content-type", "application/json");
        },
        success: function postForm(response) {
            lati = response.results[0].locations[0].latLng.lat;
            lng = response.results[0].locations[0].latLng.lng;

            console.log(lati, lng, rad);
});

【讨论】：