- 場景
- 需要提交多條數據到后端；
- 后端返回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(); } } }