JQuery unable to post data to SPRING MVC controller

Question

I am using a JQuery block to post data to a Spring controller, and here's the JQuery code

 $('.usr').click(function () {
        var user = $(this).text();

        $.post("three.htm", {
            user: user
        },function(data){
            console.log(JSON.stringify(data));
            //window.location.replace('five.htm');
            var form = $('<form action="five.htm" method="post">' +
            '<input type="hidden" name="usrData" id="usrData" value="' + JSON.stringify(data) + '" />' +
            '</form>');
            $('body').append(form);
            $("form").submit();
        }); 

 });

And the data from form is wanted in the spring controller whose code is as per below:

@RequestMapping(value="/home/five.htm")
public ModelAndView five(HttpServletRequest request,
        HttpServletResponse response) throws Exception {

    Map<String, String> model = new HashMap<String, String>();
    String abc = request.getParameter("usrData");       
    return new ModelAndView("five",model);
}

The value of "abc" is found as only "{" whereas what I need is the stringifyed version of JSON data that was printed to console via the JQuery.

Answer 1

The problem is the escaping of " in the stringified json data.

$('.usr').click(function () {
    var user = $(this).text();

    $.post("three.htm", {
        user: user
    }, function (data) {
        console.log(JSON.stringify(data));
        //window.location.replace('five.htm');
        var $form = $('<form action="five.htm" method="post" />');
        $('<input/>', {
            type: 'hidden',
            name: 'usrData',
            value: JSON.stringify(data)
        }).appendTo($form)
        $('body').append($form);
        $form.submit();
    });

});

For example, if your data is {test:3} , then the string you are constructing will be <form action="five.htm" method="post"><input type="hidden" name="usrData" id="usrData" value="{"test":3}" /></form> , now if you look at the value attribute you can see that the " of the value o prematurely terminated.

---

But really, do you need a form submit like that, why don't use use a simple ajax post request?

Answer 2

I guess this is where is the issue try removing the double quotes in the value and then submit the form.

'<input type="hidden" name="usrData" id="usrData" value=' + JSON.stringify(data) + ' />' +

and submit with:

form.submit();

---

final code would be something like this.

     $('.usr').click(function() {
       var user = $(this).text();

       $.post("three.htm", {
         user: user
       }, function(data) {
         console.log(JSON.stringify(data));
         //window.location.replace('five.htm');
         var form = $('<form action="five.htm" method="post">' +
           '<input type="hidden" name="usrData" id="usrData" value=' + JSON.stringify(data) + 
           ' />' +
           '</form>');
         $('body').append(form);
         form.submit();
       });

     });

Answer 3

Use below code issue is which the double quotes which json.stringfy return with result string

$('.usr').click(function () { var user = $(this).text();

    $.post("three.htm", {
        user: user
    },function(data){
        console.log(JSON.stringify(data));
        //window.location.replace('five.htm');
        var form = $('<form action="five.htm" method="post">' +
        '<input type="hidden" name="usrData" id="usrData" value=' + JSON.stringify(data) + ' />' +
        '</form>');
        $('body').append(form);
        $("form").submit();
    }); 

});

Answer 4

I suggest use of encodeURIComponent together with JSON.stringify() using below code snippet to set json into input hidden field otherwise check into http header while form submit only "{".

Example:

encodeURIComponent(JSON.stringify(data))

Server side you can decode using few utility code for reference i have given URL below for help:

store return json value in input hidden field

Full Code to resolve issue :

$(document).ready(function (e) {

    $('.usr').click(function () {
        var user = $(this).text();


        var dgdfg = {
            fname: "chetan",
            lname: "pandya"
        };
        console.log("dgdfg : ");
        console.log(JSON.stringify(dgdfg));
        //window.location.replace('five.htm');
        var form = $('<form action="five.htm" method="post">' +
            '<input type="hidden" name="usrData" id="usrData" value="' + encodeURIComponent(JSON.stringify(dgdfg)) + '" />' +
            '</form>');
        //   $('usrData').attr('value', dgdfg);
        $('body').append(form);
        $("form").submit();


    });

});