首页 > 代码库 > 将Json数据保存在静态脚本文件中读取

将Json数据保存在静态脚本文件中读取

      一些常用的数据例如一些网站的区域信息被改变的可能性不大,一般不通过请求获取,于是我们选择存在静态文件中,例如以下Demo:

1.动态加载Json数据显示到前台

     [HttpPost]        public ActionResult GetData()        {            List<Area> areaList = new List<Area>()            {                new Area()                {                     AreaID=1,                      AreaName="福建省",                      Depth=1,                       cityList=new List<Area>()                       {                            new Area(){ AreaID=2, AreaName="福州市", Depth=2},                            new Area(){ AreaID=2, AreaName="厦门市", Depth=2}                       }                },                new Area()                {                     AreaID=1,                      AreaName="四川省",                      Depth=1,                       cityList=new List<Area>()                       {                            new Area(){ AreaID=2, AreaName="成都市", Depth=2}                                                }                }            };            return this.Write(Request["callback"], "", new { success = true, returnData =http://www.mamicode.com/ areaList });        }
        /// <summary>        /// 转换输出        /// </summary>        /// <param name="callBack"></param>        /// <param name="paramName"></param>        /// <param name="obj"></param>        /// <returns></returns>        public ContentResult Write(string callBack, string paramName, object o)        {            Newtonsoft.Json.JsonSerializerSettings jSetting = new Newtonsoft.Json.JsonSerializerSettings();            jSetting.NullValueHandling = NullValueHandling.Ignore;            jSetting.DateFormatString = "yyyy-MM-dd HH:mm:ss";            if (callBack == "" && paramName == "")                return Content(JsonConvert.SerializeObject(o, jSetting), "application/json");            else if (callBack != "")                return Content(callBack + "(" + JsonConvert.SerializeObject(o, jSetting) + ");", "application/x-javascript");            else                return Content("var " + paramName + " = " + JsonConvert.SerializeObject(o, jSetting) + ";", "application/x-javascript");        }
<div id="main">    <ul id="ulmain">            </ul></div>
 $.ajax({            url: ‘/Home/GetData‘,            dataType: ‘jsonp‘,            type: ‘post‘,            success: function (r) {                var html = ‘‘;                for (var i = 0; i < r.returnData.length; i++) {                    var item = r.returnData[i];                    html += ‘<li>‘ + item.AreaName + ‘</li>‘                    var hc = ‘‘;                    if (item.cityList.length > 0) {                        hc += ‘<ul>‘;                        for (var j = 0; j < item.cityList.length; j++) {                            var city = item.cityList[j];                            hc += ‘<li>‘ + city.AreaName + ‘</li>‘                        }                        hc += ‘</ul>‘;                    }                    html += hc;                }                $("#ulmain").html(html);            }          });

结果如下:

技术分享

2.生成静态文件

      /// <summary>        /// 生成静态JS文件        /// </summary>        /// <returns></returns>        public ActionResult CreateFile()        {            List<Area> areaList = new List<Area>()            {                new Area()                {                     AreaID=1,                      AreaName="福建省",                      Depth=1,                       cityList=new List<Area>()                       {                            new Area(){ AreaID=2, AreaName="福州市", Depth=2},                            new Area(){ AreaID=2, AreaName="厦门市", Depth=2}                       }                },                new Area()                {                     AreaID=1,                      AreaName="四川省",                      Depth=1,                       cityList=new List<Area>()                       {                            new Area(){ AreaID=2, AreaName="成都市", Depth=2}                                                }                }            };             Newtonsoft.Json.JsonSerializerSettings jSetting = new Newtonsoft.Json.JsonSerializerSettings();             string body = "var citylist = " + Newtonsoft.Json.JsonConvert.SerializeObject(areaList, jSetting) + ";";             System.IO.File.WriteAllText(Server.MapPath("~/Scripts/temp.js"), body, System.Text.Encoding.UTF8);             return Json(new { success = true, msg = "生成成功" }, JsonRequestBehavior.AllowGet);        }   
<button id="btnCreate">    生成静态JS文件</button>
    $("#btnCreate").click(function () {            $.get("/Home/CreateFile", "", function (r) {                if (r.success)                {                    alert("生成成功");                }            });        });

静态文件在~/Scripts/temp.js:

技术分享

内容如下:

技术分享

3.注释掉AJAX请求,指向静态文件读取数据

技术分享

别忘记添加:<script src="http://www.mamicode.com/~/Scripts/temp.js"></script>

4.最终效果展示

技术分享

没有网络请求,读取的是静态文件,根据具体情况具体操作。

 

将Json数据保存在静态脚本文件中读取