如何使用json在前后台进行数据传输实例介绍


Posted in Javascript onApril 11, 2013

上一篇博客写到用javascript生成多组文本,可以让数据的输入不受显示,现在我们需要把这些输入写入数据库,这里就用到json传入。

首先,我们来写一下后台如何生成要传输的数据
[html]

function generateDtb() { 
//写入 
var txtName = document.getElementById("txtName").value; 
//创建数组 
var dtb = new Array(); 
//通过循环把数据写入到数组并返回 
for (var i = 0; i < firstGroup.length; i++) { 
var row = new Object(); 
row.Name = txtName; 
row.fullMoney = firstGroup[i].value; 
row.discount = secondGroup[i].value; 
dtb.push(row); 
} 
return dtb; 
} 
function generateDtb() { 
//写入 
var txtName = document.getElementById("txtName").value; 
//创建数组 
var dtb = new Array(); 
//通过循环把数据写入到数组并返回 
for (var i = 0; i < firstGroup.length; i++) { 
var row = new Object(); 
row.Name = txtName; 
row.fullMoney = firstGroup[i].value; 
row.discount = secondGroup[i].value; 
dtb.push(row); 
} 
return dtb; 
}

把数组转换成json串传入到后台:
[html]
$(function () { 
//点击botton1 
$("#lbtnOK").click(function () { 
var url = "DiscountManger.aspx?ajax=1"; 
var dtb = generateDtb(); 
// var strName = document.getElementById("txtName").value; 
if (dtb == null) 
{ } 
else { 
//序列化对象 
var postdata = JSON.stringify(dtb); 
//异步请求 
$.post(url, { json: postdata }, function (json) { 
if (json) { 
jBox.tip("添加成功!", "提示"); 
location.reload(); 
} 
else { 
jBox.tip("添加失败!", "提示"); 
location.reload(); 
} 
}, "json") 
} 
}); 
}); 
$(function () { 
//点击botton1 
$("#lbtnOK").click(function () { 
var url = "DiscountManger.aspx?ajax=1"; 
var dtb = generateDtb(); 
// var strName = document.getElementById("txtName").value; 
if (dtb == null) 
{ } 
else { 
//序列化对象 
var postdata = JSON.stringify(dtb); 
//异步请求 
$.post(url, { json: postdata }, function (json) { 
if (json) { 
jBox.tip("添加成功!", "提示"); 
location.reload(); 
} 
else { 
jBox.tip("添加失败!", "提示"); 
location.reload(); 
} 
}, "json") 
} 
}); 
});

在后台的操作:
首先判断是否需要传输数据
[html]
if (!IsPostBack) 
{ 
//判断是否异步请求 
if (Request.QueryString["ajax"] == "1") 
{ 
ProcessRequest(); 
} 
if (!IsPostBack) 
{ 
//判断是否异步请求 
if (Request.QueryString["ajax"] == "1") 
{ 
ProcessRequest(); 
}

在这里进行对数据的处理:
[html]
/// <summary> 
/// 处理异步请求 
/// </summary> 
private void ProcessRequest() 
{ 
//存入要填写的策略 
ArrayList arrDiscount = new ArrayList(); 
Response.ContentType = "text/html"; 
string json = Request.Form["json"]; 
//反序列化DataTable 
if (json == null) 
{ 
return; 
} 
else 
{ 
DataTable newdtb = Json2Dtb(json); 
for (int i = 0; i < newdtb.Rows.Count; i++) 
{ 
Entity.StrategyDiscount enStrategyDiscount = new Entity.StrategyDiscount(); 
//打折方案名 
enStrategyDiscount.name = newdtb.Rows[i]["Name"].ToString(); 
//商店ID 
enStrategyDiscount.shopId = long.Parse(LoginInfo.ShopID); 
enStrategyDiscount.fullMoney = Convert.ToDecimal(newdtb.Rows[i]["fullMoney"].ToString()); 
enStrategyDiscount.discount = Convert.ToDecimal(newdtb.Rows[i]["discount"].ToString()); 
//写入数据到数组 
arrDiscount.Add(enStrategyDiscount); 
} 
//写入数据到数据库 
IStrategyBLL strategy = new StrategyBLL(); 
if (strategy.AddStrategyDiscount(arrDiscount)) 
{ 
Response.Write("true"); 
Response.End(); 
} 
else 
{ 
Response.Write("false"); 
Response.End(); 
} 
} 
/// <summary> 
/// 处理异步请求 
/// </summary> 
private void ProcessRequest() 
{ 
//存入要填写的策略 
ArrayList arrDiscount = new ArrayList(); 
Response.ContentType = "text/html"; 
string json = Request.Form["json"]; 
//反序列化DataTable 
if (json == null) 
{ 
return; 
} 
else 
{ 
DataTable newdtb = Json2Dtb(json); 
for (int i = 0; i < newdtb.Rows.Count; i++) 
{ 
Entity.StrategyDiscount enStrategyDiscount = new Entity.StrategyDiscount(); 
//打折方案名 
enStrategyDiscount.name = newdtb.Rows[i]["Name"].ToString(); 
//商店ID 
enStrategyDiscount.shopId = long.Parse(LoginInfo.ShopID); 
enStrategyDiscount.fullMoney = Convert.ToDecimal(newdtb.Rows[i]["fullMoney"].ToString()); 
enStrategyDiscount.discount = Convert.ToDecimal(newdtb.Rows[i]["discount"].ToString()); 
//写入数据到数组 
arrDiscount.Add(enStrategyDiscount); 
} 
//写入数据到数据库 
IStrategyBLL strategy = new StrategyBLL(); 
if (strategy.AddStrategyDiscount(arrDiscount)) 
{ 
Response.Write("true"); 
Response.End(); 
} 
else 
{ 
Response.Write("false"); 
Response.End(); 
} 
}

这里,我们需要把json转换成datatable
[html]
/// <summary> 
/// Json转DataTable 
/// </summary> 
/// <param name="json"></param> 
/// <returns></returns> 
private DataTable Json2Dtb(string json) 
{ 
JavaScriptSerializer jss = new JavaScriptSerializer(); 
ArrayList dic = jss.Deserialize<ArrayList>(json); 
DataTable dtb = new DataTable(); 
if (dic.Count > 0) 
{ 
foreach (Dictionary<string, object> drow in dic) 
{ 
if (dtb.Columns.Count == 0) 
{ 
foreach (string key in drow.Keys) 
{ 
dtb.Columns.Add(key, drow[key].GetType()); 
} 
} 
DataRow row = dtb.NewRow(); 
foreach (string key in drow.Keys) 
{ 
row[key] = drow[key]; 
} 
dtb.Rows.Add(row); 
} 
} 
return dtb; 
} 
/// <summary> 
/// Json转DataTable 
/// </summary> 
/// <param name="json"></param> 
/// <returns></returns> 
private DataTable Json2Dtb(string json) 
{ 
JavaScriptSerializer jss = new JavaScriptSerializer(); 
ArrayList dic = jss.Deserialize<ArrayList>(json); 
DataTable dtb = new DataTable(); 
if (dic.Count > 0) 
{ 
foreach (Dictionary<string, object> drow in dic) 
{ 
if (dtb.Columns.Count == 0) 
{ 
foreach (string key in drow.Keys) 
{ 
dtb.Columns.Add(key, drow[key].GetType()); 
} 
} 
DataRow row = dtb.NewRow(); 
foreach (string key in drow.Keys) 
{ 
row[key] = drow[key]; 
} 
dtb.Rows.Add(row); 
} 
} 
return dtb; 
}

这样,就可以把数据无刷新的写入到数据库。
当然,如果我们有一个从数据库读取的datatable,如果通过json显示在前台呢。
首先,我们需要把datatable转换为json数据
[html]
/// <summary> 
/// DataTable转Json 
/// </summary> 
/// <param name="dtb"></param> 
/// <returns></returns> 
private string Dtb2Json(DataTable dtb) 
{ 
JavaScriptSerializer jss = new JavaScriptSerializer(); 
ArrayList dic = new ArrayList(); 
foreach (DataRow row in dtb.Rows) 
{ 
Dictionary<string, object> drow = new Dictionary<string, object>(); 
foreach (DataColumn col in dtb.Columns) 
{ 
drow.Add(col.ColumnName, row[col.ColumnName]); 
} 
dic.Add(drow); 
} 
return jss.Serialize(dic); 
} 
/// <summary> 
/// DataTable转Json 
/// </summary> 
/// <param name="dtb"></param> 
/// <returns></returns> 
private string Dtb2Json(DataTable dtb) 
{ 
JavaScriptSerializer jss = new JavaScriptSerializer(); 
ArrayList dic = new ArrayList(); 
foreach (DataRow row in dtb.Rows) 
{ 
Dictionary<string, object> drow = new Dictionary<string, object>(); 
foreach (DataColumn col in dtb.Columns) 
{ 
drow.Add(col.ColumnName, row[col.ColumnName]); 
} 
dic.Add(drow); 
} 
return jss.Serialize(dic); 
}

然后写回到前台
[html]
/// <summary> 
/// 处理异步请求 
/// </summary> 
private void ProcessRequest() 
{ 
Response.ContentType = "text/html"; 
string json = Request.Form["json"]; 
//反序列化DataTable 
DataTable newdtb = Json2Dtb(json); 
//序列化DataTable为JSON 
string back = Dtb2Json(newdtb); 
Response.Write(back); 
Response.End(); 
} 
/// <summary> 
/// 处理异步请求 
/// </summary> 
private void ProcessRequest() 
{ 
Response.ContentType = "text/html"; 
string json = Request.Form["json"]; 
//反序列化DataTable 
DataTable newdtb = Json2Dtb(json); 
//序列化DataTable为JSON 
string back = Dtb2Json(newdtb); 
Response.Write(back); 
Response.End(); 
}

在前台接受显示:
[html]
$(function() { 
//点击botton1 
$("#botton1").click(function() { 
createTable(json); 
}); 
}); 
//显示Json中的数据 
function createTable(json) { 
var table = $("<table border='1'></table>"); 
for (var i = 0; i < json.length; i++) { 
o1 = json[i]; 
var row = $("<tr></tr>"); 
for (key in o1) { 
var td = $("<td></td>"); 
td.text(o1[key].toString()); 
td.appendTo(row); 
} 
row.appendTo(table); 
} 
table.appendTo($("#back")); 
} 
$(function() { 
//点击botton1 
$("#botton1").click(function() { 
createTable(json); 
}); 
}); 
//显示Json中的数据 
function createTable(json) { 
var table = $("<table border='1'></table>"); 
for (var i = 0; i < json.length; i++) { 
o1 = json[i]; 
var row = $("<tr></tr>"); 
for (key in o1) { 
var td = $("<td></td>"); 
td.text(o1[key].toString()); 
td.appendTo(row); 
} 
row.appendTo(table); 
} 
table.appendTo($("#back")); 
}

这样,就完成了json向后台传输数据和显示后台数据了,当然,这种传输方式只是传输的一种,如果是简单的字符串也可以用get和post进行传输,但是,javascript本身具有不安全性和不稳定行,对于一些比较重要的数据,建议还是寻找一些更可靠的方法。
Javascript 相关文章推荐
Javascript 匿名函数及其代码模式原理
Mar 19 Javascript
JQUBAR1.1 jQuery 柱状图插件发布
Nov 28 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
Aug 19 Javascript
JS回调函数的应用简单实例
Sep 17 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
Mar 23 Javascript
JavaScript数据类型学习笔记
Jan 25 Javascript
微信小程序 教程之引用
Oct 18 Javascript
JS实现的数字格式化功能示例
Feb 10 Javascript
JS倒计时实例_天时分秒
Aug 22 Javascript
vue  自定义组件实现通讯录功能
Sep 30 Javascript
小程序数据通信方法大全(推荐)
Apr 15 Javascript
js原生map实现的方法总结
Jan 19 Javascript
在javascript中对于DOM的加强
Apr 11 #Javascript
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
Apr 11 #Javascript
在javascript中关于节点内容加强
Apr 11 #Javascript
onkeydown事件解决按回车键直接提交数据的需求
Apr 11 #Javascript
jQuery实用基础超详细介绍
Apr 11 #Javascript
在js中判断checkboxlist(.net控件客户端id)是否有选中
Apr 11 #Javascript
jQuery实现 注册时选择阅读条款 左右移动
Apr 11 #Javascript
You might like
综合图片计数器
2006/10/09 PHP
php生成圆角图片的方法
2015/04/07 PHP
PHP SPL标准库之文件操作(SplFileInfo和SplFileObject)实例
2015/05/11 PHP
PHP网站建设的流程与步骤分享
2015/09/25 PHP
SyntaxHighlighter代码加色使用方法
2008/09/07 Javascript
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
2009/02/04 Javascript
myeclipse安装jQuery插件的方法
2011/03/29 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
2012/09/14 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
2013/01/25 Javascript
jquery实现input输入框实时输入触发事件代码
2014/01/28 Javascript
js操作数据库实现注册和登陆的简单实例
2016/05/26 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
2016/09/17 Javascript
Angular ng-repeat指令实例以及扩展部分
2016/12/26 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
2017/03/25 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
2018/10/29 Javascript
浅谈JavaScript节流和防抖函数
2020/08/25 Javascript
javascript自定义加载loading效果
2020/09/15 Javascript
vue+iview使用树形控件的具体使用
2020/11/02 Javascript
[52:20]DOTA2-DPC中国联赛正赛 SAG vs XGBO3 第一场 3月5日
2021/03/11 DOTA
使用Python的内建模块collections的教程
2015/04/28 Python
Django之无名分组和有名分组的实现
2019/04/16 Python
python画微信表情符的实例代码
2019/10/09 Python
pytorch对梯度进行可视化进行梯度检查教程
2020/02/04 Python
浅谈Python程序的错误:变量未定义
2020/06/02 Python
python使用Windows的wmic命令监控文件运行状况,如有异常发送邮件报警
2021/01/30 Python
Kathmandu澳洲户外商店:新西兰户外运动品牌
2017/11/12 全球购物
严选全球尖货,立足香港:Bonpont宝盆
2018/07/24 全球购物
运动会入场词50字
2014/02/20 职场文书
兴趣小组活动总结
2014/05/05 职场文书
2014感恩节演讲稿大全
2014/10/11 职场文书
2014年路政工作总结
2014/12/10 职场文书
首次购房证明
2015/06/19 职场文书
离婚协议书范本(2016最新版)
2016/03/18 职场文书
python用字节处理文件实例讲解
2021/04/13 Python
mysql中DCL常用的用户和权限控制
2022/03/31 MySQL
MySQL创建管理KEY分区
2022/04/13 MySQL