TIPS-JSON日期格式實戰小技巧

過去介紹過微軟針對DateTime制訂的獨有JSON表示法: "\/Date(…)\/"。今天實際應用時,發現一個有趣現象: ASP.NET Server傳來包含DateTimeJSON字串,因使用JavaScriptSerializer解析,日期會呈現"\/Date(…)\/"格式;在Client端以JSON.parse()還原回成物件,由於未應用到日期值,故未另外將其轉換成JavaScript Date型別,在JavaScript物件中該值維持字串型別。稍後再次以JSON.stringify()成JSON字串傳至ASP.NET Server端解析時,卻出現了"/Date(1330444800000)/ is not a valid value for DateTime. "錯誤訊息。

明明是JavaScriptSerializer.Serialize()出的內容,再送回去給JavaScriptSerializer.Deserialize()卻解不回來,WTF?

用範例來重現問題:

<%@ Page Language="C#" %>
 
<!DOCTYPE>
 
<script runat="server">
    void Page_Load(object sender, EventArgs e)
    {
        string mode = Request["mode"];
        if (!string.IsNullOrEmpty(mode))
        {
            var jss =
                new System.Web.Script.Serialization.JavaScriptSerializer();
            if (mode == "get")
            {
                List<DateTime> list = new List<DateTime>();
                list.Add(new DateTime(2012, 2, 29));
                Response.Write(jss.Serialize(list));
            }
            else if (mode == "post")
            {
                try
                {
                    List<DateTime> list =
                        jss.Deserialize<List<DateTime>>(Request["json"]);
                    Response.Write("List[0]=" + list.First());
                }
                catch (Exception ex)
                {
                    Response.Write("Error: " + ex.Message);
                }
            }
            Response.End();
        }
    }
</script>
 
<html>
<head runat="server">
    <title>JSON Date Lab</title>
    <script type='text/javascript' 
            src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.js'></script>   
    <script>
        $(function () {
            $("#btnTest").click(function () {
                //取得List<DateTime> JSON
                $.get("?mode=get", {}, function (json) {
                    alert("JSON=" + json);
                    //將取得的JSON字串傳回去,可解析,但會有時區誤差
                    $.post("?mode=post", { json: json }, function (r) {
                        alert("TEST1:" + r);
                    });
                    //將JSON字串先解析為物件
                    var list = JSON.parse(json);
                    //因JSON.parse()不認得\/Date(...)\/格式,只會被當成字串處理
                    //而"\/"相當於"\",故最終被解析成字串"/Date(...)/",
                    var rejson = JSON.stringify(list);
                    alert("Object->" + rejson);
                    //將這個字串陣列JSON.stringify()再傳回去,則會因"\/"變成"/"而出現錯誤
                    $.post("?mode=post", { json: rejson }, function (r) {
                        alert("TEST2:" + r);
                    });
                });
            });
        });
    </script>
    <style>
        body,input { font-size: 9pt; }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <input type="button" id="btnTest" value="Test" />
    </form>
</body>
</html>

在Server端建立List<DateTime>,以JavaScriptSerializer.Serialize()後傳至Client端,得到結果如下,符合預期:

JSON=["\/Date(1330444800000)\/"]

直接將剛才接到字串抛回Server端進行JavaScriptSerializer.Deserialize(),可順利取回DateTime,但因時區標準不同會有8小時時差,原本的2012/2/29被視為格林威治時間2/28 16:00。

TEST1:List[0]=2012/2/28 下午 04:00:00

若在Client端使用JSON.parse()轉換,得到的是字串陣列,內建的JSON.parse()不認得"/Date(1330444800000)/",並不會自動將其轉為Date()。

Object->["/Date(1330444800000)/"]

將以上字串陣列JSON.stringify()後再傳給JavaScriptSerializer.Deserialize(),卻發生以下錯誤:

TEST2:Error: /Date(1330444800000)/ is not a valid value for DateTime.

其實問題根源還挺明顯的,JSON.parse()時,依一般JavaScript法則將"\/"視為"/",故解讀出的字串變成"/Date(1330444800000)/";而在JSON.stringify()處理時,"/Date(1330444800000)/"中的正斜線(/)並非必須使用反斜線額外標示的特殊符號,故維持"/Date(1330444800000)/",而非微軟所期望的"\/Date(1330444800000)\/",於是在Server端轉換時便發生錯誤。

一個鋸箭做法是對JSON.stringify()產生的字串進行加工調整,使用RegExp將其中的"/Date(1330444800000)/"再置換回"\/Date(1330444800000)\/",不過考量過,這樣仍會留下8小時時差的問題待解。另一個做法是將"/Date(1330444800000)/"在Client端轉成JavaScript Date()型別,之後用JSON.stringify()會變成"2012-02-28T16:00:00.000Z",而這個格式可被JavaScriptSerializer.Deserialize()正確解讀成DateTime,還可一併解決時區問題,算是較好的解決方案。

以下是程式範例。程式中宣告了一個parseMsJsonDate()可將"/Date(1330444800000)/"轉為Date(),寫法偷學自Kendo UI範例,已是我第二次應用,改寫時還是不禁對JS高人的巧妙寫法讚嘆不已呀...

    <script>
 
        //JSON日期轉換
        var dateRegExp = /^\/Date\((.*?)\)\/$/;
        window.parseMsJsonDate = function (value) {
            var date = dateRegExp.exec(value);
            return new Date(parseInt(date[1]));
        }
 
        $(function () {
 
            $("#btnTest").click(function () {
                //取得List<DateTime> JSON
                $.get("?mode=get", {}, function (json) {
                    alert("JSON=" + json);
                    //將JSON字串先解析為物件
                    var list = JSON.parse(json);
                    //將\/Date(...)\/解析成Javascript日期型別
                    for (var i = 0; i < list.length; i++)
                        list[i] = parseMsJsonDate(list[i]);
                    var rejson = JSON.stringify(list);
                    $.post("?mode=post", { json: rejson }, function (r) {
                        //正確顯示時間,連時區差問題也一併解決
                        alert(r);
                    });
                });
            });
        });
    </script>

執行時,兩次alert結果如下:

JSON=["\/Date(1330444800000)\/"]

List[0]=2012/2/29 上午 12:00:00

歡迎推文分享:
Published 06 March 2012 05:34 AM 由 Jeffrey
Filed under: , ,
Views: 13,653



意見

# william0657 said on 05 March, 2012 08:24 PM

最近在學 jQuery + json 看了黑暗大的文章,受益良多,感謝分享!!

心得:這篇又讓我學到一個縮寫 【WTF】

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<March 2012>
SunMonTueWedThuFriSat
26272829123
45678910
11121314151617
18192021222324
25262728293031
1234567
 
RSS
創用 CC 授權條款
【廣告】
twMVC

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication