前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >将Json数据保存在静态脚本文件中读取

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

作者头像
用户1055830
发布2018-01-18 15:44:14
2.2K0
发布2018-01-18 15:44:14
举报
文章被收录于专栏:飞扬的花生飞扬的花生

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

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

代码语言:javascript
复制
     [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 = areaList });
        }
代码语言:javascript
复制
        /// <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");
        }
代码语言:javascript
复制
<div id="main">
    <ul id="ulmain">
        
    </ul>
</div>
代码语言:javascript
复制
 $.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.生成静态文件

代码语言:javascript
复制
      /// <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);
        }   
代码语言:javascript
复制
<button id="btnCreate">
    生成静态JS文件
</button>
代码语言:javascript
复制
    $("#btnCreate").click(function () {

            $.get("/Home/CreateFile", "", function (r) {
                if (r.success)
                {
                    alert("生成成功");
                }
            });
        });

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

内容如下:

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

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

4.最终效果展示

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2016-11-17 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.动态加载Json数据显示到前台
  • 2.生成静态文件
  • 3.注释掉AJAX请求,指向静态文件读取数据
  • 4.最终效果展示
相关产品与服务
对象存储
对象存储(Cloud Object Storage,COS)是由腾讯云推出的无目录层次结构、无数据格式限制,可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务。腾讯云 COS 的存储桶空间无容量上限,无需分区管理,适用于 CDN 数据分发、数据万象处理或大数据计算与分析的数据湖等多种场景。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档