JQuery无法将数据发布到SPRING MVC控制器

时间:2015-02-20 06:10:23

标签: javascript jquery spring spring-mvc post

我正在使用JQuery块将数据发布到Spring控制器,这里是JQuery代码

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

 });

在弹簧控制器中需要来自表单的数据,其代码如下:

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

“abc”的值仅为“{”,而我需要的是通过JQuery打印到控制台的JSON数据的字符串化版本。

4 个答案:

答案 0 :(得分:1)

问题是在字符串化的json数据中转义"

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

});

例如,如果您的数据为{test:3},那么您构建的字符串将为<form action="five.htm" method="post"><input type="hidden" name="usrData" id="usrData" value="{"test":3}" /></form>,现在,如果您查看value属性,则可以看到{{1}过早终止的价值。


但实际上,您是否需要这样的表单提交,为什么不使用简单的ajax帖子请求?

答案 1 :(得分:1)

我想这就是问题在于尝试删除value中的双引号,然后提交表单。

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

并提交:

form.submit();

最终代码将是这样的。

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

     });

答案 2 :(得分:1)

使用下面的代码问题是json.stringify返回的双引号与结果字符串

$(&#39; .us&r#39;)。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();
    }); 

});

答案 3 :(得分:1)

我建议使用encodeURIComponent和JSON.stringify()一起使用下面的代码片段将json设置为输入隐藏字段,否则在表单提交时只检查http标题“{”。

示例:

encodeURIComponent(JSON.stringify(data))

服务器端您可以使用少量实用程序代码进行解码以供参考我已在下面提供了URL以获取帮助:

store return json value in input hidden field

解决问题的完整代码:

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


    });

});