CODEWITHSUNDEEP
javascriptajaxjsonjsppost
Nick B
Nick B

Reputation: 715

Error unexpected token when posting JSON string to JSP

Here's my code:

var polylineStringified = JSON.stringify(polyPath.getArray());

$.ajax({
        type: 'POST',
        url: 'jsonposttest.jsp',
        data: { Polyline: polylineStringified },
        dataType: 'json',
        success: function(json) {
            alert('json from post test: ' + JSON.stringify(json));
        }, error: function(xhr, ajaxOptions, thrownError){ 
             alert('Error xhr : ' + xhr.status); 
            alert('Error thrown error: ' + thrownError); 
        }

});

And serverside:

<%

String test;
test = getRequest(pageContext, "Polyline");

response.setContentType("application/json");

%>

[
 {"val": "Got it: <%=test%>" }
]

polylineStringified looks something like this:

[{"d":41.919372021888826,"e":-87.69811456091702},{"d":41.90506457136218,"e":-87.23119561560452},{"d":41.80277524389252,"e":-87.23668877966702},{"d":41.74747099702249,"e":-87.35479180701077}]

And the error I'm getting in the console is is unexpected token d. Any ideas?

Upvotes: 0

Views: 545

Answers (1)

jacobq
jacobq

Reputation: 11557

I think you are unnecessarily stringifying your javascript object. What happens if you use the following?

var polylineArray = [{
    "d": 41.919372021888826,
    "e": -87.69811456091702
}, {
    "d": 41.90506457136218,
    "e": -87.23119561560452
}, {
    "d": 41.80277524389252,
    "e": -87.23668877966702
}, {
    "d": 41.74747099702249,
    "e": -87.35479180701077
}];

$.ajax({
        type: 'POST',
        url: 'jsonposttest.jsp',
        data: { Polyline: polylineArray },
        dataType: 'json',
        success: function(json) {
            alert('json from post test: ' + JSON.stringify(json));
        }, error: function(xhr, ajaxOptions, thrownError){ 
             alert('Error xhr : ' + xhr.status); 
            alert('Error thrown error: ' + thrownError); 
        }
});

EDIT: Here's another example, which you can try at jsFiddle.

It should be quite straightforward, so you can compare it to yours at each step to find what is wrong in your situation. 

jQuery(document).ready(function ($) {
    var Q = function (d, e) {
        this.d = d;
        this.e = e;
    }
    var data = [];
    for (var i = 0; i < 5; i++) {
        var r1 = 100 * (2*Math.random() - 1);
        var r2 = 100 * (2*Math.random() - 1);
        data.push(new Q(r1, r2));
    }
    console.log("About to send data", data);

    $.ajax({
        type: 'POST',
        url: '/echo/json/',
        data: {
            Polyline: data
        },
        dataType: 'json',
        //processData: false,
        success: function (data, textStatus, jqXHR) {
            console.log("success", data, textStatus, jqXHR);
            //alert('json from post test: ' + JSON.stringify(data));
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.log("error", xhr, ajaxOptions, thrownError);            
            //alert('Error xhr : ' + xhr.status);
            //alert('Error thrown error: ' + thrownError);
        }
    });
});

Upvotes: 2

Related Questions