解决json日期格式问题的3种方法


Posted in Javascript onFebruary 02, 2014

开发中有时候需要从服务器端返回json格式的数据,在后台代码中如果有DateTime类型的数据使用系统自带的工具类序列化后将得到一个很长的数字表示日期数据,如下所示:

//设置服务器响应的结果为纯文本格式
            context.Response.ContentType = "text/plain";
           //学生对象集合
            List<Student> students = new List<Student>
            {
                new Student(){Name ="Tom",
                    Birthday =Convert.ToDateTime("2014-01-31 12:12:12")},
                new Student(){Name ="Rose",
                    Birthday =Convert.ToDateTime("2014-01-10 11:12:12")},
                new Student(){Name ="Mark",
                    Birthday =Convert.ToDateTime("2014-01-09 10:12:12")}
            };
            //javascript序列化器
            JavaScriptSerializer jss=new JavaScriptSerializer();
           //序列化学生集合对象得到json字符
            string studentsJson=jss.Serialize(students);
           //将字符串响应到客户端
            context.Response.Write(studentsJson);
           context.Response.End();

运行结果是:

解决json日期格式问题的3种方法

其中Tom所对应生日“2014-01-31”变成了1391141532000,这其实是1970 年 1 月 1 日至今的毫秒数;1391141532000/1000/60/60/24/365=44.11年,44+1970=2014年,按这种方法可以得出年月日时分秒和毫秒。这种格式是一种可行的表示形式但不是普通人可以看懂的友好格式,怎么让这个格式变化?

解决办法:

方法1:在服务器端将日期格式使用Select方法或LINQ表达式转换后发到客户端:

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.Script.Serialization;
namespace JsonDate1
{
    using System.Linq;
    /// <summary>
    /// 学生类,测试用
    /// </summary>
    public class Student
    {
        /// <summary>
        /// 姓名
        /// </summary>
        public String Name { get; set; }
        /// <summary>
        /// 生日
        /// </summary>
        public DateTime Birthday { get; set; }
    }
    /// <summary>
    /// 返回学生集合的json字符
    /// </summary>
    public class GetJson : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            //设置服务器响应的结果为纯文本格式
            context.Response.ContentType = "text/plain";
            //学生对象集合
            List<Student> students = new List<Student>
            {
                new Student(){Name ="Tom",Birthday =Convert.ToDateTime("2014-01-31 12:12:12")},
                new Student(){Name ="Rose",Birthday =Convert.ToDateTime("2014-01-10 11:12:12")},
                new Student(){Name ="Mark",Birthday =Convert.ToDateTime("2014-01-09 10:12:12")}
            };
            //使用Select方法重新投影对象集合将Birthday属性转换成一个新的属性
            //注意属性变化后要重新命名,并立即执行
            var studentSet =
                students.Select
                (
                p => new { p.Name, Birthday = p.Birthday.ToString("yyyy-mm-dd") }
                ).ToList();
            //javascript序列化器
            JavaScriptSerializer jss = new JavaScriptSerializer();
            //序列化学生集合对象得到json字符
            string studentsJson = jss.Serialize(studentSet);
            //将字符串响应到客户端
            context.Response.Write(studentsJson);
            context.Response.End();
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

Select方法重新投影对象集合将Birthday属性转换成一个新的属性,注意属性变化后要重新命名,属性名可以相同;这里可以使用select方法也可以使用LINQ查询表达式,也可以选择别的方式达到相同的目的;这种办法可以将集合中客户端不用的属性剔除,达到简单优化性能的目的。

运行结果:

解决json日期格式问题的3种方法

这时候的日期格式就已经变成友好格式了,不过在javascript中这只是一个字符串。

方法二:

在javascript中将"Birthday":"\/Date(1391141532000)\/"中的字符串转换成javascript中的日期对象,可以将Birthday这个Key所对应的Value中的非数字字符以替换的方式删除,到到一个数字1391141532000,然后实例化一个Date对象,将1391141532000毫秒作为参数,得到一个javascript中的日期对象,代码如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>json日期格式处理</title>
    <script src="Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $.getJSON("getJson.ashx", function (students) {
                $.each(students, function (index, obj) {
                    $("<li/>").html(obj.Name).appendTo("#ulStudents");
                    //使用正则表达式将生日属性中的非数字(\D)删除
                    //并把得到的毫秒数转换成数字类型
                    var birthdayMilliseconds = parseInt(obj.Birthday.replace(/\D/igm, ""));
                    //实例化一个新的日期格式,使用1970 年 1 月 1 日至今的毫秒数为参数
                    var birthday = new Date(birthdayMilliseconds);
                    $("<li/>").html(birthday.toLocaleString()).appendTo("#ulStudents"); ;
                });
            });
        });
    </script>
</head>
<body>
    <h2>json日期格式处理</h2>
    <ul id="ulStudents">
    </ul>
</body>
</html>

运行结果:

解决json日期格式问题的3种方法

上的使用正则/\D/igm达到替换所有非数字的目的,\D表示非数字,igm是参数,分别表示忽视(ignore)大小写;多次、全局(global)替换;多行替换(multi-line);有一些时候还会出现+86的情况,只需要变换正则同样可以达到目的。另外如果项目中反复出现这种需要处理日期格式的问题,可以扩展一个javascript方法,代码如下:

$(function () {
            $.getJSON("getJson.ashx", function (students) {
                $.each(students, function (index, obj) {
                  $("<li/>").html(obj.Name).appendTo("#ulStudents");
                  //使用正则表达式将生日属性中的非数字(\D)删除
                    //并把得到的毫秒数转换成数字类型
                    var birthdayMilliseconds = parseInt(obj.Birthday.replace(/\D/igm, ""));
                  //实例化一个新的日期格式,使用1970 年 1 月 1 日至今的毫秒数为参数
                    var birthday = new Date(birthdayMilliseconds);
                  $("<li/>").html(birthday.toLocaleString()).appendTo("#ulStudents");
                  $("<li/>").html(obj.Birthday.toDate()).appendTo("#ulStudents");
                });
            });
        });
        //在String对象中扩展一个toDate方法,可以根据要求完善
        String.prototype.toDate = function () {
            var dateMilliseconds;
            if (isNaN(this)) {
                //使用正则表达式将日期属性中的非数字(\D)删除
                dateMilliseconds =this.replace(/\D/igm, "");
            } else {
                dateMilliseconds=this;
            }
            //实例化一个新的日期格式,使用1970 年 1 月 1 日至今的毫秒数为参数
            return new Date(parseInt(dateMilliseconds));
        };

上面扩展的方法toDate不一定合理,也不够强大,可以根据需要修改。

方法三:

可以选择一些第三方的json工具类,其中不乏有一些已经对日期格式问题已处理好了的,常见的json序列化与反序列化工具库有:

1.fastJSON.
2.JSON_checker.
3.Jayrock.
4.Json.NET - LINQ to JSON.
5.LitJSON.
6.JSON for .NET.
7.JsonFx.
8.JSONSharp.
9.JsonExSerializer.
10.fluent-json
11.Manatee Json

这里以litjson为序列化与反序列化json的工具类作示例,代码如下:

using System;
using System.Collections.Generic;
using System.Web;
using LitJson;
namespace JsonDate2
{
    using System.Linq;
    /// <summary>
    /// 学生类,测试用
    /// </summary>
    public class Student
    {
        /// <summary>
        /// 姓名
        /// </summary>
        public String Name { get; set; }
        /// <summary>
        /// 生日
        /// </summary>
        public DateTime Birthday { get; set; }
    }
    /// <summary>
    /// 返回学生集合的json字符
    /// </summary>
    public class GetJson : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            //设置服务器响应的结果为纯文本格式
            context.Response.ContentType = "text/plain";
            //学生对象集合
            List<Student> students = new List<Student>
            {
                new Student(){Name ="Tom",Birthday =Convert.ToDateTime("2014-01-31 12:12:12")},
                new Student(){Name ="Rose",Birthday =Convert.ToDateTime("2014-01-10 11:12:12")},
                new Student(){Name ="Mark",Birthday =Convert.ToDateTime("2014-01-09 10:12:12")}
            };
            //序列化学生集合对象得到json字符
            string studentsJson = JsonMapper.ToJson(students);
            //将字符串响应到客户端
            context.Response.Write(studentsJson);
            context.Response.End();
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

运行结果如下:

解决json日期格式问题的3种方法

这时候的日期格式就基本正确了,只要在javascript中直接实例化日期就好了,

var date = new Date("01/31/2014 12:12:12");
alert(date.toLocaleString());

客户端的代码如下:

$(function () {
            $.getJSON("GetJson2.ashx", function (students) {
                $.each(students, function (index, obj) {
                    $("<li/>").html(obj.Name).appendTo("#ulStudents");
                    var birthday = new Date(obj.Birthday);
                    $("<li/>").html(birthday.toLocaleString()).appendTo("#ulStudents");
                });
            });
        });
        var date = new Date("01/31/2014 12:12:12");
        alert(date.toLocaleString());

这里讲到了三种解决json中序列化后的日期格式问题,应该还有更好更完善的方法,欢迎您告诉我。因为有很多学生问我所以我写了这点文字,欢迎批评指正。

Javascript 相关文章推荐
IE下使用cloneNode注意事项分享
Nov 22 Javascript
JavaScript获取XML数据附示例截图
Mar 05 Javascript
javascript中加号(+)操作符的一些神奇作用
Jun 06 Javascript
JS判断是否360安全浏览器极速内核的方法
Jan 29 Javascript
jQuery蓝色风格滑动导航栏代码分享
Aug 19 Javascript
基于Bootstrap实现图片轮播效果
May 22 Javascript
Angularjs的ng-repeat中去除重复数据的方法
Aug 05 Javascript
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
Vue中 key keep-alive的实现原理
Sep 18 Javascript
layui实现给某一列加点击事件
Oct 26 Javascript
Vue 设置axios请求格式为form-data的操作步骤
Oct 29 Javascript
解决echarts数据二次渲染不成功的问题
Jul 20 Javascript
为jQuery添加Webkit的触摸的方法分享
Feb 02 #Javascript
简单的JavaScript互斥锁分享
Feb 02 #Javascript
在百度知道团队中快速审批新成员的js脚本
Feb 02 #Javascript
基于jquery的simpleValidate简易验证插件
Jan 31 #Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
Jan 31 #Javascript
jquery为页面增加快捷键示例
Jan 31 #Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
Jan 31 #Javascript
You might like
关于PHPDocument 代码注释规范的总结
2013/06/25 PHP
PHP计算数组中值的和与乘积的方法(array_sum与array_product函数)
2016/04/01 PHP
yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法
2016/04/20 PHP
jquerydom对象的事件隐藏显示和对象数组示例
2013/12/10 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
2015/11/30 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
2016/05/21 Javascript
基于JQuery实现图片上传预览与删除操作
2016/05/24 Javascript
jQuery 生成svg矢量二维码
2016/08/09 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
2016/09/04 Javascript
jquery实现图片切换代码
2016/10/13 Javascript
AngularJS入门教程之过滤器用法示例
2016/11/02 Javascript
Ionic3 UI组件之autocomplete详解
2017/06/08 Javascript
详谈AngularJs 控制器、数据绑定、作用域
2017/07/09 Javascript
JS实现的数组去除重复数据算法小结
2017/11/17 Javascript
webpack配置导致字体图标无法显示的解决方法
2018/03/06 Javascript
Angular 组件之间的交互的示例代码
2018/03/24 Javascript
Nodejs实现微信分账的示例代码
2021/01/19 NodeJs
[02:41]辉夜杯现场一家三口 “我爸玩风行 我玩血魔”
2015/12/27 DOTA
[05:20]2018DOTA2亚洲邀请赛主赛事第三日战况回顾 LGD率先挺进胜者组决赛
2018/04/06 DOTA
[08:17]Ti9 现场cosplay
2019/09/10 DOTA
python 获取et和excel的版本号
2009/04/09 Python
pandas数值计算与排序方法
2018/04/12 Python
django 发送邮件和缓存的实现代码
2018/07/18 Python
Python3中内置类型bytes和str用法及byte和string之间各种编码转换 问题
2018/09/27 Python
Python实现把多维数组展开成DataFrame
2019/11/30 Python
详解Python中的编码问题(encoding与decode、str与bytes)
2020/09/30 Python
python如何快速拼接字符串
2020/10/28 Python
韩国CJ食品专卖网:CJonmart
2016/09/11 全球购物
俄罗斯设计师家具购物网站:The Furnish
2019/12/01 全球购物
匈牙利超级网上商店和优惠:Alza.hu
2019/12/17 全球购物
体育专业个人的求职信范文
2013/09/21 职场文书
物理教师自荐信范文
2013/12/28 职场文书
30岁生日感言
2014/01/25 职场文书
流动人口婚育证明
2014/10/19 职场文书
2015元旦联欢晚会结束语
2014/12/14 职场文书
SpringCloud超详细讲解Feign声明式服务调用
2022/06/21 Java/Android