将Json数据保存在静态脚本文件中读取
2024-10-18 23:32:32
一些常用的数据例如一些网站的区域信息被改变的可能性不大,一般不通过请求获取,于是我们选择存在静态文件中,例如以下Demo:
1.动态加载Json数据显示到前台
[HttpPost]
public ActionResult GetData()
{
List<Area> areaList = new List<Area>()
{
new Area()
{
AreaID=,
AreaName="福建省",
Depth=,
cityList=new List<Area>()
{
new Area(){ AreaID=, AreaName="福州市", Depth=},
new Area(){ AreaID=, AreaName="厦门市", Depth=}
}
},
new Area()
{
AreaID=,
AreaName="四川省",
Depth=,
cityList=new List<Area>()
{
new Area(){ AreaID=, AreaName="成都市", Depth=}
}
}
};
return this.Write(Request["callback"], "", new { success = true, returnData = 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=,
AreaName="福建省",
Depth=,
cityList=new List<Area>()
{
new Area(){ AreaID=, AreaName="福州市", Depth=},
new Area(){ AreaID=, AreaName="厦门市", Depth=}
}
},
new Area()
{
AreaID=,
AreaName="四川省",
Depth=,
cityList=new List<Area>()
{
new Area(){ AreaID=, AreaName="成都市", Depth=}
}
}
}; 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="~/Scripts/temp.js"></script>
4.最终效果展示
没有网络请求,读取的是静态文件,根据具体情况具体操作。
最新文章
- iOS 4s-6Plus屏幕自动适配及颜色转换为十六进制
- HYSBZ 2038 莫队算法
- 关于IOS免证书真机安装的过程和问题
- iostat监控磁盘io
- Python开发【第六章】:Python面向对象
- Magento PHP Extension ";curl"; must be loaded解决方法
- DataTable.select() 返回 DataTable
- lintcode:合并两个排序链表
- 使用Fiddler提高前端工作效率 (介绍篇)
- CodeForces 689A -Mike and Cellphone
- PHP分页详细讲解
- Robot Framework自动化测试环境的搭建
- Java多线程之synchronized(三)
- SendRedirect和forward差分
- Map和Set
- Macbook pro从购买服务器到搭建服务器环境(1)
- Vue2.0选中当前鼠标移入移除加样式
- h5-语义化标签
- Linux&#160;学习笔记之超详细基础linux命令&#160;Part&#160;9
- 【BZOJ4300】 绝世好题
热门文章
- Mapreduce的文件和hbase共同输入
- C语言 &#183; 整数平均值
- [APUE]标准IO库(上)
- python黑魔法 -- 内置方法使用
- ASP.NET MVC5+EF6+EasyUI 后台管理系统 (源码购买说明)
- 苹果强制使用HTTPS传输了怎么办?——关于HTTPS,APP开发者必须知道的事
- 如何利用ansible callback插件对执行结果进行解析
- 【C#附源码】数据库文档生成工具支持(Excel+Html)
- Spring中Bean的作用域、生命周期
- [修正] Firemonkey TFrame 存档后,下次载入某些事件连结会消失(但源码还在)