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.

Have you tried checking what's there in request payload for your request in "Network" tab in browser's debugging tool? Probably you could find the answer there itself. — Pramod Karandikar, Feb 20 '15 at 06:21
@Pramod there was a problem with the value I was setting at the JQuery level. The request that was being sent to the controller didn't contain the attribute value. That was the problem. Fixed now. Please check Arun's answer. — swateek, Feb 20 '15 at 06:37

score 1 · Accepted Answer · answered Feb 20 '15 at 06:20

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?

I am trying to redirect it to another page. So, using AJAX won't help me change the view page in browser. — swateek, Feb 20 '15 at 06:24
I need small help though.. am setting this value obtained to a model and passing that model as a parameter to ModelAndView. On the view page I need the javascript to read that value set in model and do some operation. Any help in this regard please? — swateek, Feb 20 '15 at 06:35

score 1 · Answer 2 · answered Feb 20 '15 at 06:22

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

     });

Thanks Jai! I found Arun's answer to be suitable for me. – swateek Feb 20 '15 at 06:36 — swateek, Feb 20 '15 at 06:36

score 1 · Answer 3 · answered Feb 20 '15 at 06:25

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

});

Thanks Vivek! I found Arun's answer to be suitable for me. – swateek Feb 20 '15 at 06:36 — swateek, Feb 20 '15 at 06:36

score 1 · Answer 4 · edited May 23 '17 at 11:50

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


    });

});

The encodeURIComponent() you suggested is messing up with the data am sending from the JQuery. — swateek, Feb 20 '15 at 07:20
I understood your point.. thanks! combined your answer with Arun's and it is working. — swateek, Feb 20 '15 at 07:31

JQuery unable to post data to SPRING MVC controller

4 Answers4