在ajax调用中遇到解析错误，但数据已成功传递

Question

So I have basic form that takes an address, gets the latitude/longitude then im trying to pass the lat/long value to my API. The API is getting the variables but im getting a parsing error in my ajax call after its successfully passed.

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

ajax call

$('#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 call

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

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

        return "redirect: /";
    }  

so I am getting the parameter "lati" but it wont redirect the page then I get an error in the second ajax call. Do I need to JSON.Stringify the variables before I pass them? I do need to pass the variables "lati","lng","rad" to the api but I was trying to get it working with one first.

Answer 1

When you use Ajax, the Spring controller supposes to return text, String, or json. why?

Because your Ajax success method expects to recieve a text, String, or json.

That means you can't perform redirect as an Ajax response .

So if you want to return the text for lati variable just do:

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

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

    return n1;
}  

if you want to return a few parameters , then yes, json is a good choice to do it.

You can do it easily by using jackson-databind jar, all you need to do is to return an object that contains these 3 variables, and of course you'll need the @ResponseBody annotation on your controller.

One more thing, on your client Ajax calls you'll need to mark that you expect to receive a json type. datatype: "json" ,like this:

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