目录
什么是JSON?
JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串,然后就可以在网络或者程序之间轻松地传递这个字符串,并在需要的时候将它还原为各编程语言所支持的数据格式
任何支持的类型都可以通过 JSON 来表示,例如字符串、数字、对象、数组等。
{
"firstName"
:
"zhangsan"
,
"lastName"
: "lisi"}
以上是最直观的例子---{键: 值}
应用场景:
当浏览器发送请求到服务端,服务端响应的数据较多,需要将其数据转化为JSON文件进行传输,返回给回调函数(以AJAX为例)
之前用的都是XML,两者有什么区别:
JSON如何从后端传到前端?
在html页面加载中,加载到JavaScript函数时,向ashx页面(后端)发送post请求
服务器端(后端)---将从数据库中获得的数据,转化为JSON文件(字符串类型),返回给前端
context.Response.ContentType = "text/plain";
int pageIndex;
if (!int.TryParse(context.Request["pageIndex"], out pageIndex))
{
pageIndex = 1;
}
int pageSize = 5;
BLL.UserInfoService UserInfoService = new BLL.UserInfoService();
int pageCount = UserInfoService.GetPageCount(pageSize);//获取总页数.
//判断当前页码值的取值范围。
pageIndex = pageIndex < 1 ? 1 : pageIndex;
pageIndex = pageIndex > pageCount ? pageCount : pageIndex;
//获取分页数据
List<UserInfo> list = UserInfoService.GetPageList(pageIndex, pageSize);
//获取页码条。
string pageBar = Common.PageBarHelper.GetPagaBar(pageIndex, pageCount);
System.Web.Script.Serialization.JavaScriptSerializer js = new System.Web.Script.Serialization.JavaScriptSerializer();
string str = js.Serialize(new { UList = list, MyPageBar = pageBar });//将数据序列化成JSON字符串。匿名类。
context.Response.Write(str);
前端 ---在JavaScript中通过方法接收,将JSON中的数据按照键值对的形式遍历到页面上,通过id标识(tablist),遍历到哪个表中,完成.
<table id="tabList">
<tr><th>编号</th><th>用户名</th><th>密码</th><th>邮箱</th><th>时间</th><th>删除</th><th>详细</th><th>编辑</th></tr>
</table>
//加载用户数据
function loadUserInfo(pageIndex) {
$.post("UserList.ashx", {"pageIndex":pageIndex}, function (data) {
var serverData = $.parseJSON(data);
var serverDataLength = serverData.UList.length;
for (var i = 0; i < serverDataLength; i++) {
$("<tr><td>" + serverData.UList[i].Id + "</td><td>" + serverData.UList[i].UserName +
"</td><td>" + serverData.UList[i].UserPass + "</td><td>" + serverData.UList[i].Email
+ "</td><td>" + ChangeDateFormat(serverData.UList[i].RegTime) +
"</td><td><a href='javascript:void(0)' class='deletes' dId='" + serverData.UList[i].Id +
"'>删除</a></td><td><a href='javascript:void(0)' class='details' nId='" + serverData.UList[i].Id +
"'>详细</a></td><td><a href='javascript:void(0)' class='edits' eId='" + serverData.UList[i].Id +
"'>编辑</a></td></tr>").appendTo("#tabList");
}
//将页码条加到DIV上。
$("#pageBarDiv").html(serverData.MyPageBar);
bindMyPageBarClick();//给数字页码加单击事件
bindDetailClick();//注意:一定要表格中所有的数据加载完成了,才能给表格中的超链接加单击事件。
bindDeleteClick();//删除
bindEditClick();//编辑
});
}