• req.getParameter()无法获取参数(附前端json序列化)


    问题:前端用Ajax的post方式想servlet传递参数,servlet的getParameter()方法无法获取参数。

    前端代码:

    $.ajax({
                        url: '/TestWeb/addBook',
                        type: 'post',
                        data: JSON.stringify($('#addBookForm').serializeJSON()),//jQuery的json序列化函数
                        //data: $('#addBookForm').serialize(),
                        dataType: "json",//返回的数据类型
                        headers : {  
                             'Content-Type' : 'application/json;charset=utf-8'  
                        }
                        success: function () {
                            $('#addModelClose').click();
                            layer.msg('添加新书成功!');
                        }
                        
    });

    想传入json数据,所以一开始 设置'Content-Type' : 'application/json;charset=utf-8'  ,然后发现servlet那边req.Parameter()获取的都为null。百度相关信息后发现,HTML中的form表单有一个关键属性 enctype=application/x-www-form-urlencoded ,Servlet的API提供了对这种编码方式解码的支持,只需要调用ServletRequest 类中的getParameter()方法就可以得到表单中提交的数据。

    然后百度知道jQuery的Ajax的post方法默认的ContentType就是这种,于是把之前的content-Type注释掉,重新运行,发现还是不行。然后我想可能是既然没有设置成json,servlet不识别json数据,于是把data改成普通的数据请求格式,即 id=123&cx=lklj 这种格式。

    然后就成功在servlet用getParameter()获得数据。

    附:

    把前端表单数据转化成json字符串:

    方法1: 

    JSON.stringify($('#addBookForm').serializeJSON())可以直接把表单的内容格式化为json数据格式,但这个方法需要相对应的jquery插件(serializeJson要插件,然后这个函数是把表单数据变成一个js对象,再用stringify把js对象变成json字符串)

    顺便提一下:  $('#addBookForm').serialize()可以直接把表单内容格式化为普通请求格式,像 id=123&cx=lklj 

    方法2:

    <script type="application/javascript">
        //发送表单ajax请求
        $(':submit').on('click',function(){
            $.ajax({
                url:"buy",
                type:"POST",
                data:JSON.stringify($('form').serializeObject()),
                contentType:"application/json",  //缺失会出现URL编码,无法转成json对象
           dataType: "json", success:function(){ alert("成功"); } }); }); /** * 自动将form表单封装成json对象 */ $.fn.serializeObject = function() { var o = {}; var a = this.serializeArray(); $.each(a, function() { if (o[this.name]) { if (!o[this.name].push) { o[this.name] = [ o[this.name] ]; } o[this.name].push(this.value || ''); } else { o[this.name] = this.value || ''; } }); return o; }; </script>

    tips:

    更改源码的js或者html后浏览器没反应,可以试着用ctrl+F5来更新。

  • 相关阅读:
    jQuery插件学习(一)
    全屏滚动
    Js与Jq 获取浏览器和对象值的方法
    HTML5 布局标签
    CSS3笔记(一)
    CSS的一些思考(一)
    js学习(一)
    CSS Hacks 总结
    CSS样式总结
    HTML标签总结
  • 原文地址:https://www.cnblogs.com/wangshen31/p/8434856.html
Copyright © 2020-2023  润新知