如何将Json对象(含方法) 序列化成 js对象传递给前台

#后台传递JavaScript对象（含方法）

#JSON对象序列化  

#对象含方法解析

因之前在做Echart时，遇到了需要后台传递Json数据包含JS函数问题，如下

option = {
    title: {
        text: '在中国租个房子有多贵？',
        subtext: '市中心一室月租费（数据来源：https://www.numbeo.com）'
    },
    legend: {
        show: true,
        data: ['价格范围', '均值']
    },
    grid: {
        top: 100
    },
    angleAxis: {
        type: 'category',
        data: cities
    },
    tooltip: {
        show: true,
        formatter: function (params) {
            var id = params.dataIndex;
            return cities[id] + '<br>最低：' + data[id][0] + '<br>最高：' + data[id][1] + '<br>平均：' + data[id][2];
        }
    },
    radiusAxis: {
    },
    polar: {
    },
    series: [{
        type: 'bar',
        itemStyle: {
            color: 'transparent'
        },
        data: data.map(function (d) {
            return d[0];
        }),
        coordinateSystem: 'polar',
        stack: '最大最小值',
        silent: true
    }, {
        type: 'bar',
        data: data.map(function (d) {
            return d[1] - d[0];
        }),
        coordinateSystem: 'polar',
        name: '价格范围',
        stack: '最大最小值'
    }, {
        type: 'bar',
        itemStyle: {
            color: 'transparent'
        },
        data: data.map(function (d) {
            return d[2] - barHeight;
        }),
        coordinateSystem: 'polar',
        stack: '均值',
        silent: true,
        z: 10
    }, {
        type: 'bar',
        data: data.map(function (d) {
            return barHeight * 2;
        }),
        coordinateSystem: 'polar',
        name: '均值',
        stack: '均值',
        barGap: '-100%',
        z: 10
    }]
};

　　

假设服务端存在这么个对象，对象里的formatter属性是一个js函数，目前以字符串的形式保存

   var user = new User()
            {
                name = "geqingwei",
                age = 28,
                address = "山东菏泽",
                formatter = "function(params){ alert(params.name+\"-\"+params.age+\"-\"+params.address);}"
 };

　　

那么如何将这个Json对象序列化成JS对象？ 如下：

  {
        name: "geqingwei",
        age: 28,
        address: "山东菏泽",
        formatter: function (params) {
            alert(params.name + "-" + params.age + "-" + params.address);
        }
    };

 

首先应该搞清楚什么是JS对象，什么是Json对象

Json: 只是一种数据传输格式，键值必须加双引号，其值不能有方法函数

JS对象：是一个类实例，键值不能加引号，值可以是函数、对象、字符串、数字 等等

 

解决步骤：

一、后台

1.实现一个JsonConverter,解析字符串属性为函数

 public class JsEventConvert : JsonConverter
    {
        public override bool CanConvert(Type objectType)
        {
            return true;
        }

        public override void WriteJson(JsonWriter writer, object value, JsonSerializer serializer)
        {
            var textwriter = writer as JsonTextWriter;
            textwriter.QuoteChar = ' ';
            writer.WriteValue(value);
            textwriter.QuoteChar = '"';
        }

        public override object ReadJson(JsonReader reader, Type objectType, object existingValue, JsonSerializer serializer)
        {
            var value = "";
            if (existingValue != null || existingValue is string)
            {
                value = existingValue as string;
            }
            return value;
        }
    }

　　

实现上一步需要修改 Newtonsoft.Json 源码，因为 上面代码红色部分中 QuoteChar 属性不允许设空值；

2.可以从GitHub 下载源码 https://github.com/JamesNK/Newtonsoft.Json ，注意选择版本，找到JsonTextWrite.cs  查找QuoteChar 变量，删除以下代码即可

  if (value != '"' && value != '\'')
         throw new ArgumentException(@"Invalid JavaScript string quote character. Valid quote characters are ' and "".");

3.编译Newtonsoft.Json ，并将DLL引用到项目中

4.在字符串函数属性上使用 JsEventConvert

   public class User
    {
        public string name { get; set; }
        public int age { get; set; }
        public string address { get; set; }

        [JsonConverter(typeof(JsEventConvert))]
        public string formatter { get; set; }
    }

5. 解析

 public string eventHandle(string formatter)
        {
            //var user = new User() { name = "geqingwei", age = 28, address = "山东菏泽", formatter = "function(params){ alert(params.name+\"-\"+params.age+\"-\"+params.address);}" };
            var user = new User()
            {
                name = "geqingwei",
                age = 28,
                address = "山东菏泽",
                formatter = "function(params){ alert(params.name+\"-\"+params.age+\"-\"+params.address);}"
            };

            return JsonConvert.SerializeObject(user);
        }

 

二、前端

    var option = null;

    function getdata() {
        var eventstr = $('#eventstr').val();
        $.ajax({
            url: urls.event,
            type: 'post',
            data: { formatter: eventstr },
            dataType: 'text',
            success: function (result) {
                option = eval("function convert(obj){ return obj}; convert(" + result + ");");
            }
        });
    }

    //触发事件
    function triggerevent() {
        //if (option.formatter instanceof Function) //判断formatter 是不是对象方法
            option.formatter(option);
    }