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

Question

我正在使用 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();
        }); 

 });

spring 控制器需要表单中的数据，代码如下：

@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 数据的字符串化版本。

Answer 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 属性可以看到值o 的" 提前终止.

---

但真的，你需要这样的表单提交，为什么不使用简单的 ajax 发布请求？

Answer 2

我想这就是问题所在尝试删除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();
       });

     });

Answer 3

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

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

我建议将 encodeURIComponent 与 JSON.stringify() 一起使用，使用下面的代码 sn-p 将 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();


    });

});