将Json数据保存在静态脚本文件中读取
时间:2022-04-22
本文章向大家介绍将Json数据保存在静态脚本文件中读取,主要内容包括1.动态加载Json数据显示到前台、2.生成静态文件、3.注释掉AJAX请求,指向静态文件读取数据、4.最终效果展示、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
一些常用的数据例如一些网站的区域信息被改变的可能性不大,一般不通过请求获取,于是我们选择存在静态文件中,例如以下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 = 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="~/Scripts/temp.js"></script>
4.最终效果展示
没有网络请求,读取的是静态文件,根据具体情况具体操作。
- orion的简单测试 (r8笔记第75天)
- golang ftp客户端示例 支持断点续传
- python 网页特征提取XPATH(两天玩转) 第一天
- 和开发同学讨论的一个技术问题(r8笔记第73天)
- 剖析Oracle中oerr命令(r8笔记第70天)
- 甜品店切蛋糕问题(动态规划,Go语言实现)
- SQL—复制表结构及其数据
- python连接SQL报错:1366, "Incorrect string value: '\xF0\x9F\x98\x81'
- PCIE的简单配置(r8笔记第82天)
- 7个深度神经网络可视化工具,不可错过!
- Pwnhub之奇妙的巨蟒 Writeup
- WINDOW 安装mysql5.7数据库,并设置密码及相关报错
- go channel 通信通道
- SQl 语句(常见) 新建,删除,修改表,新增字段,修改默认值
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 聊聊 Python 代码覆盖率工具 - Coverage
- 目标检测模型YOLO-V1损失函数详解
- 轻松学Pytorch-使用ResNet50实现图像分类
- IDEA奇淫小技巧
- [PHP框架] ThinkPHP6 介绍、安装及配置
- 【翻译】withoutboats 的 io-uring 笔记
- [Python]随机生成大量的虚拟信息测试数据(姓名,手机号,ID,家庭住址等)
- Java核心技术之动态代理
- 开源verilog仿真工具iverilog+GTKWave初体验
- [算法] 数组排序 - 冒泡排序法与直接选择排序法
- TS 设计模式01 - 工厂模式
- Spring与Mybatis的整合
- Python中的计数 - Counter类
- vue 记账本
- c/c++补完计划(三): 素数统计