解决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 相关文章推荐
jQuery中delegate和on的用法与区别详细解析
Jan 26 Javascript
javascript中数组的多种定义方法和常用函数简介
May 09 Javascript
JavaScript制作淘宝星级评分效果的思路
Jun 23 Javascript
浅析Javascript中双等号(==)隐性转换机制
Oct 27 Javascript
vue+springmvc导出excel数据的实现代码
Jun 27 Javascript
JS使用Date对象实时显示当前系统时间简单示例
Aug 23 Javascript
JavaScript基础教程之如何实现一个简单的promise
Sep 11 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
Nov 07 Javascript
js实现简单模态框实例
Nov 16 Javascript
Vue.js 中的实用工具方法【推荐】
Jul 04 Javascript
Vue实现滑动拼图验证码功能
Sep 15 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
Oct 17 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
基于PHP与XML的PDF文档生成技术
2006/10/09 PHP
php防止sql注入示例分析和几种常见攻击正则表达式
2014/01/12 PHP
dedecms中使用php语句指南
2014/11/13 PHP
THINKPHP内容分页代码分享
2015/01/14 PHP
WordPress中用于更新伪静态规则的PHP代码实例讲解
2015/12/18 PHP
php解决和避免form表单重复提交的几种方法
2016/08/31 PHP
Laravel实现表单提交
2017/05/07 PHP
JS获取DropDownList的value值与text值的示例代码
2014/01/07 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
2015/05/09 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
2015/11/29 Javascript
js原型链与继承解析(初体验)
2016/05/09 Javascript
js实现开启密码大写提示
2016/12/21 Javascript
JavaScript实现短信倒计时60s
2017/10/09 Javascript
详解JavaScript函数callee、call、apply的区别
2019/03/08 Javascript
Node.js 多线程完全指南总结
2019/03/27 Javascript
webpack 最佳配置指北(推荐)
2020/01/07 Javascript
微信小程序入门之绘制时钟
2020/10/22 Javascript
在树莓派2或树莓派B+上安装Python和OpenCV的教程
2015/03/30 Python
python读写json文件的简单实现
2017/04/11 Python
Pygame框架实现飞机大战
2020/08/07 Python
python 三种方法提取pdf中的图片
2021/02/07 Python
用html5实现语音搜索框的方法
2014/03/18 HTML / CSS
耐克巴西官方网站:Nike巴西
2016/08/14 全球购物
澳大利亚牛仔裤商店:Just Jeans
2016/10/13 全球购物
俄罗斯达美乐比萨外送服务:Domino’s Pizza
2020/12/18 全球购物
优秀党员转正的自我评价
2013/10/06 职场文书
优秀经理事迹材料
2014/02/01 职场文书
《记承天寺夜游》教学反思
2014/02/16 职场文书
群众路线教育实践活动心得体会
2014/03/07 职场文书
授权委托书格式模板
2014/04/03 职场文书
QQ空间主人寄语大全
2014/04/12 职场文书
2014年乡镇卫生院工作总结
2014/11/24 职场文书
铁路安全反思材料
2014/12/24 职场文书
2016年“节能宣传周”活动总结
2016/04/05 职场文书
ORM模型框架操作mysql数据库的方法
2021/07/25 MySQL
详解Python内置模块Collections
2022/03/22 Python