这篇文章已经过时了。

请参考比较合适的前后端交互方式。

首先是发送AJAX请求的html页面

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>AJAX</title>

<script type="text/javascript" src="/lib/jquery-3.2.1.min.js"></script>

<script type="text/javascript">

    var saveData = {"en":"sss",

        "ch":"げ啊爲",

        "dt":"2012-01-02 03:04:05",

        "no":"-3.1415926"};

    function json_obj() {

        $.ajax({

            type:"post",

            url:"/ajax/json_obj",

            dataType:"json",

            data:saveData,

            success:function(data) {

                alert(data);

            },

            error:function(data) {

                alert('error');

            }

        });

    }

    function json_str() {

        $.ajax({

            type:"post",

            url:"/ajax/json_str",

            dataType:"json",

            contentType : 'application/json',

            data:JSON.stringify(saveData),

            success:function(data) {

                alert(data);

            },

            error:function(data) {

                alert('error');

            }

        });

    }

</script>

</head>

<body>

    <input id="a" value="b" type="hidden" />

    <button onclick="json_obj()">json_obj</button><br><br>

    <button onclick="json_str()">json_str</button><br><br>

</body>

</html>

然后是控制器和用于和参数绑定的实体类

/** 'package' and 'import' ingore */

@Controller

@RequestMapping("ajax")

public class AjaxController {

    private static final Logger log = LogManager.getLogger(AjaxController.class);

    @RequestMapping(value = "json_obj")

    @ResponseBody

    public String jsonobj(Data data) {

        log.info("请求开始");

        log.info("请求成功");

        return "success";

    }

    @RequestMapping(value = "json_str")

    @ResponseBody

    public String jsonstr(@RequestBody DataS data) {

        log.info("请求开始");

        log.info("请求成功");

        return "success";

    }

}

class Data {

    private String en;

    private String ch;
    @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")

    private Date dt;

    private Double no;

    /** getter and setter ignore */

}

class DataS {

    private String en;

    private String ch;

    private String dt;

    private String no;

    /** getter and setter ignore */

}

以上的例子中，无论把json_obj和json_str的ajax.type改成get还是post，都是能成功运行得到正确结果的。

JS函数   <->   控制器的请求方法(实体类) 

json_obj   <->   jsonobj(Data)

这种情况下，ajax.data的内容是一个json对象，没有经过JSON.stringify()的转换。

尽量不要指定json_obj的ajax为contentType="application/json"，否则，

对于get请求没关系，对于post请求，jsonobj(Data)的参数data无法得到绑定，会是null

jsonobj(Data)的参数前不能指定@RequestParam，

因为无论是post还是get请求，请求中都没有一个名为"data"的请求参数。

jsonobj(Data)的参数前不能指定@RequestBody，否则HTTP-400

发送一个json对象的好处是，实体类Data的域的类型可以指定为具体的类型，比如Double和Date。

其中Date域需要指定@DataTimeFormat(pattern="yyyy-MM-dd HH:mm:ss")

注解里的pattern最好跟ajax发送的日期一致，

如果pattern的信息比ajax少时，会丧失时间精度，

如果pattern的信息比ajax多是，Date域无法得到绑定，会是null

json_str   <->   jsonstr(DataS)

这种情况下，ajax.data的内容是一个json字符串，经过JSON.stringify()的转换。

ajax必须指定contentType : 'application/json'，否则HTTP-415，

jsonobj(Data)的参数前必须指定@RequestBody，否则jsonobj(Data)的参数data无法得到绑定，会是null

发送一个json字符串的好处是，不需要进行类型转换了，实体类DataS的域都是String类型，

（这可能也是他的坏处，如果有需求的话，需要专门把String 转换成其他类型）

另一个好处是在数据验证方面，由于JSR303的@Pattern只支持String域，DataS的所有域都可以进行正则验证，保证了后续类型转化的安全性

向前端返回存在Date字段的数据的解决方法

处理Ajax请求的请求方法，几乎都会有@ResponseBody，请求的方法的返回值一般会有两种情况。

  • 返回一个String

这种情况，一般会做一步new ObjectMapper.writeValueAsString(resultEntity);的处理，

如果resultEntity里面有Date域，那直接用ObjectMapper转化的话，Date域会被转换成一串莫名其妙的数字，

为了避免这个现象，需要在ObjectMapper对象里注入一个转换器。

        ObjectMapper om = new ObjectMapper();

        om.setDateFormat(new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"));

        String s = om.writeValueAsString(resultEntity);

        return s;
  • 返回一个实体类

这种情况，如果实体类都是String域，那肯定没问题，

如果实体类里有Date域，那么前端ajax.success函数里面直接data.dt会被转换成以串莫名其妙的数字，

这种情况下的，这个现象，后端是无法解决的。

以上两点中，出现“一串莫名其妙的数字”的情况，前端是有办法解决的。

    function timeStamp2String(time){

        var datetime = new Date();

        datetime.setTime(time);

        var year = datetime.getFullYear();

        var month = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;

        var date = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();

        var hour = datetime.getHours()< 10 ? "0" + datetime.getHours() : datetime.getHours();

        var minute = datetime.getMinutes()< 10 ? "0" + datetime.getMinutes() : datetime.getMinutes();

        var second = datetime.getSeconds()< 10 ? "0" + datetime.getSeconds() : datetime.getSeconds();

        return year + "-" + month + "-" + date+" "+hour+":"+minute+":"+second;

    }

简单来说就是在JS里面引入一个Date对象。

存在日期类型的JSON数据，进行SpringMVC参数绑定时存在的问题和解决方案的更多相关文章

  1. easyui框架Date日期类型以json形式显示到前台datagrid时，显示为[object Object]

    如下图,easyui当后台把时间数据返回转换成json然后加载在easyui的datagrid里面,显示为[object Object]      需要对时间格式添加格式的显示方法 /** * 时间格 ...

  2. 【转载】C#.NET WebApi返回各种类型(图片/json数据/字符串)，.net图片转二进制流或byte

    C#.NET WebApi返回各种类型(图片/json数据/字符串),.net图片转二进制流或byte 转载:http://www.itdos.com/Mvc/20150302/0741255.htm ...

  3. 将String类型的json数据转换为真正的json数据

    问题 在做JavaWeb项目的时候,我们经常需要将Java对象转化为Json数据格式响应到前台页面,但是转化完成之后,看着是Json类型的数据格式,但实际上是字符串类型,在这里说两个方法将String ...

  4. ngResource提交json数据如何带参数

    ngResource提交json数据如何带参数 直接使用ngResource和REST服务接口交互可以让程序显得简洁,前提是配置好跨域和OPTIONS请求的支持,与此同时,如果需要带些额外的参数,有两 ...

  5. SpringMVC参数绑定总结

    springMvc作用:    a) 接收请求中的参数    b) 将处理好的数据返回给页面参数绑定(就是从请求中接收参数):    a) 默认支持的类型: request, response, se ...

  6. [转载]SpringBoot系列: SpringMVC 参数绑定注解解析

    本文转载自 https://www.cnblogs.com/morethink/p/8028664.html, 作者写得非常好, 致谢! SpringMVC 参数绑定注解解析   本文介绍了用于参数绑 ...

  7. SpringMVC参数绑定、Post乱码解决方法

    从客户端请求key/value数据,经过参数绑定,将key/value数据绑定到controller方法的形参上. springmvc中,接收页面提交的数据是通过方法形参来接收.而不是在control ...

  8. SpringMVC参数绑定（二）

    在springMVC中,提交请求的数据是通过方法形参来接收的,从客户端请求的key/value数据,经过参数绑定,将key/value数据绑定到controller形参上,然后再controller就 ...

  9. SpringMVC参数绑定（未完待续）

    1. Strut2与SpringMVC接收请求参数的区别 Struts2通过action类的成员变量接收SpringMVC通过controller方法的形参接收 2. SpringMVC参数绑定流程 ...

随机推荐

  1. Python操作Redis（转）

    原文1:https://cloud.tencent.com/developer/article/1151834 原文2:https://www.cnblogs.com/zhaohuhu/p/91406 ...

  2. hdu 3342 拓扑模板题

    直接上代码吧 #include<cstdio> #include<cstring> #include<algorithm> using namespace std; ...

  3. 21-MySQL DBA笔记-高可用性

    第21章 高可用性 本章将为读者介绍单点故障的处理策略,以及单点故障最为主流的解决方案:MySQL数据库切换. 21.1 概述 可用性定义为系统保持正常运行时间的百分比,高可用可以理解为系统可用时间的 ...

  4. http协议与soap协议之间的区别

    http是标准超文本传输协议.使用对参数进行编码并将参数作为键值对传递,还使用关联的请求语义.每个协议都包含一系列HTTP请求标头及其他一些信息,定义客户端向服务器请求哪些内容,服务器用一系列HTTP ...

  5. Express无法解析POST请求的JSON参数

    在用Express和MongoDB搭建后端开发环境时,可能会利用测试工具发送带有JSON格式数据的POST请求,那么这时就要利用request.body获取json数据,但此时可能遇到json无法解析 ...

  6. js中undefined的几种情况

    1.变量声明且没有赋值: 2.获取对象中不存在的属性时: 3.函数需要实参,但是调用时没有传值,形参是undefined: 4.函数调用没有返回值或者return后没有数据,接收函数返回的变量是und ...

  7. moment——日期格式化常用示例

    <template> <div id="app" style="text-align: center;"> <h1>{{ m ...

  8. h5 安卓/IOS长按图片、文字禁止选中或弹出系统菜单 的解决方法

    最近在做IM的语音功能,发现当长按录音的时候手机会弹出来系统菜单, IOS下bug形式:1)长按的标签设置为css background的形式:不会弹出菜单: 2)但是当设置为img时,系统默认识别为 ...

  9. element-ui组件，全选树节点，新增数据子节点数据，出现回填问题

    案情分析:全选后父节点被选中保存,在这个树节点下新增数据时,就会出现,也被选中,事实上数据是没有被选中,也就意味着权限未被配置,而显示是已经配置了,显然这个是一个bug 1.处理前,直接用下面的方法很 ...

  10. 【Distributed】分布式系统中遇到的问题

    一.概述  大型互联网公司公司一般都采用服务器集群,这样就要实现多个服务器之间的通讯,在nginx实现负载均衡(分布式解决方案)服务器集群会产生那些问题? 分布式锁(基本)单纯的Lock锁或者syn ...