- 场景
- 需要提交多条数据到后端；
- 后端返回json数据交给前端处理。
- 使用json好处
- 前后端交互数据量小,仅返回真正需要的数据，效率高；
- 前后端通过json交互可做到数据业务处理与数据展示分开，界面设计更灵活。
- 需求
1.将table多条数据post提交到后台；
2.将后台对象转换为json字符串返回到前端解析；
- 效果
传递将表格数据转换为json数据发送到后端
将接收到的json数据反序列化为对象
将对象反序列化为json字符返回到前端
- 实现
- 前置知识
- 使用ajax异步处理；
- 推荐课程：http://www.imooc.com/learn/250
- 推荐文章：ajax专题http://www.ibm.com/developerworks/cn/ajax/ajaxbasic.html
- json
- 推荐文章：JSON 入门指南http://www.ibm.com/developerworks/cn/web/wa-lo-json/
- 引入需要的文件
- 引入json2.js文件，源码：https://github.com/douglascrockford/JSON-js
- 引入Newtonsoft.Json.dll ,官方网站:http://www.newtonsoft.com/json
- 前端处理
- 获取table数据并转成json对象
var dataArr = new Array();
$('table')
.find('tr')
.each(function () {
var tr = $(this);
var tbData = new Object();
tbData.Name = tr.find('td').eq('0').text();
tbData.height = tr.find('td').eq('1').text();
tbData.Age = tr.find('td').eq('2').text();
dataArr.push(tbData);
// console.log("tbData：" + tbData);
// console.log("对象转换为json字符串");
var jsonStr = JSON.stringify(tbData);
// console.log(jsonStr);
});
// console.log("dataArr:" + dataArr);
//console.log(dataArr);
// console.log("对象数组转换为json字符串");
var jsonArrStr = JSON.stringify(dataArr);
// console.log(jsonArrStr);
- 将对象通过ajax发送给后端，后端处理完成后解析返回的数据
$.ajax({
type: "post",
data: { "jsonArrStr": jsonArrStr },
url: "AjaxServices.aspx",
dataType: "text",
success: function (result) {
console.log(result);
//处理字符串为json
var jsonObj = JSON.parse(result);
//var jsonObj=eval(result);//这种方法会执行json字符串中的js脚本，不建议要使用
for (var i = 0; i < jsonObj.length; i++) {
var obj = jsonObj[i];
var msg = "第" + i + "个：" + "Name=" + obj.Name + " 身高:" + obj.Height + " 年龄：" + obj.Age;
if (console)
console.log(msg);
else {
alert(msg);
}
}
}
});
- 后端处理
- 创建与json对象结构一致的实体类
public class UserInfoEntity
{
public string Name { get; set; }
public string Height { get; set; }
public string Age { get; set; }
}
- 反序列化json字符串为对象
List<UserInfoEntity> choiceOptionEntities = new List<UserInfoEntity>();
#region 反序列化 typeUserInfo json参数
//取得对象数组
List<object> objInfo = JsonConvert.DeserializeObject<List<object>>(jsonArrStr);
foreach (var str in objInfo)
{
//将数组中的一个对象反序列化为对象
List<UserInfoEntity> c = JsonConvert.DeserializeObject<List<UserInfoEntity>>("[" + str.ToString() + "]");
//添加到对象集合
choiceOptionEntities.Add(c[0]);
}
#endregion
- 将对象序列化为json字符串
//将对象序列化为json字符串
string json = JsonConvert.SerializeObject(choiceOptionEntities);
//or
//JavaScriptSerializer jsonSerialiser = new JavaScriptSerializer();
//strReturn = jsonSerialiser.Serialize(choiceOptionEntities);
- 前端解析返回的json字符
//处理字符串为json
var jsonObj = JSON.parse(result);
//var jsonObj=eval(result);//这种方法会执行json字符串中的js脚本，最好不要使用
for (var i = 0; i < jsonObj.length; i++) {
var obj = jsonObj[i];
var msg = "第" + i + "个：" + "Name=" + obj.Name + " 身高:" + obj.Height + " 年龄：" + obj.Age;
if (console)
console.log(msg);
else {
alert(msg);
}
}
- 所有源码
- 前端页面
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JSON传输</title> <script src="js/jquery1.11.3/jquery1.11.3.min.js"></script> <script src="js/json/json2.js"></script> </head> <body> <table> <tbody> <tr> <td>张三</td> <td>170</td> <td>24</td> </tr> <tr> <td>李四</td> <td>180</td> <td>26</td> </tr> <tr> <td>王五</td> <td>175</td> <td>22</td> </tr> </tbody> </table> <button id="btnGetJsonData">GetJsonData</button> <script> $("#btnGetJsonData").click(function () { console.log("GetDataStart"); var dataArr = new Array(); $('table') .find('tr') .each(function () { var tr = $(this); var tbData = new Object(); tbData.Name = tr.find('td').eq('0').text(); tbData.height = tr.find('td').eq('1').text(); tbData.Age = tr.find('td').eq('2').text(); dataArr.push(tbData); // console.log("tbData：" + tbData); // console.log("对象转换为json字符串"); var jsonStr = JSON.stringify(tbData); // console.log(jsonStr); }); // console.log("dataArr:" + dataArr); //console.log(dataArr); // console.log("对象数组转换为json字符串"); var jsonArrStr = JSON.stringify(dataArr); // console.log(jsonArrStr); $.ajax({ type: "post", data: { "jsonArrStr": jsonArrStr }, url: "AjaxServices.aspx", dataType: "text", success: function (result) { console.log(result); //处理字符串为json var jsonObj = JSON.parse(result); //var jsonObj=eval(result);//这种方法会执行json字符串中的js脚本，最好不要使用 for (var i = 0; i < jsonObj.length; i++) { var obj = jsonObj[i]; var msg = "第" + i + "个：" + "Name=" + obj.Name + " 身高:" + obj.Height + " 年龄：" + obj.Age; if (console) console.log(msg); else { alert(msg); } } } }); }) </script> </body> </html>
- 后端页面
//实体类public class UserInfoEntity { public string Name { get; set; } public string Height { get; set; } public string Age { get; set; } }
//AjaxServices页
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Script.Serialization; using System.Web.UI; using System.Web.UI.WebControls; using JsonData.Entity; using Newtonsoft.Json; namespace JsonData { public partial class AjaxServices : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { string strReturn = ""; Response.Clear(); string jsonArrStr = Request["jsonArrStr"]; if (!string.IsNullOrWhiteSpace(jsonArrStr)) { List<UserInfoEntity> choiceOptionEntities = new List<UserInfoEntity>(); #region 反序列化 typeUserInfo json参数 //取得对象数组 List<object> objInfo = JsonConvert.DeserializeObject<List<object>>(jsonArrStr); foreach (var str in objInfo) { //将数组中的一个对象反序列化为对象 List<UserInfoEntity> c = JsonConvert.DeserializeObject<List<UserInfoEntity>>("[" + str.ToString() + "]"); //添加到对象集合 choiceOptionEntities.Add(c[0]); } #endregion //将对象序列化为json字符串 string json = JsonConvert.SerializeObject(choiceOptionEntities); //or //JavaScriptSerializer jsonSerialiser = new JavaScriptSerializer(); //strReturn = jsonSerialiser.Serialize(choiceOptionEntities); //返回json格式数据 strReturn = json; } else { strReturn += "参数错误"; } Response.Write(strReturn); Response.End(); } } }