如何使用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 相关文章推荐
Jquery乱码的一次解决过程 图解教程
Feb 20 Javascript
用js获取电脑信息(是使用与IE浏览器)
Jan 15 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
Dec 05 Javascript
jQuery控制cookie过期时间的方法
Apr 07 Javascript
详解JavaScript中的表单验证
Jun 16 Javascript
Javascript中Promise的四种常用方法总结
Jul 14 Javascript
微信小程序倒计时功能实现代码
Nov 09 Javascript
vue-router路由懒加载和权限控制详解
Dec 13 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
Apr 25 Javascript
微信小程序支付前端源码
Aug 29 Javascript
浅谈vue 单文件探索
Sep 05 Javascript
uni-app实现点赞评论功能
Nov 25 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
QueryPath PHP 中的jQuery
2010/04/11 PHP
PHP定时自动生成静态HTML的实现代码
2010/06/20 PHP
php实现mysql封装类示例
2014/05/07 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(五)
2014/06/23 PHP
深入解析PHP中foreach语句控制数组循环的用法
2015/11/30 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
详谈symfony window下的安装 安装时候出现的问题以及解决方法
2017/09/28 PHP
jquery tab插件制作实现代码
2010/06/22 Javascript
jquery三个关闭弹出层的小示例
2013/11/05 Javascript
页面按钮禁用与解除禁用的方法
2014/02/19 Javascript
js实现局部页面打印预览原理及示例代码
2014/07/03 Javascript
JavaScript中定义函数的三种方法
2015/03/12 Javascript
javascript实现给定半径求出圆的面积
2015/06/26 Javascript
纯javascript响应式树形菜单效果
2015/11/10 Javascript
js判断上传文件后缀名是否合法
2016/01/28 Javascript
AngularJS使用ng-options指令实现下拉框
2016/08/23 Javascript
Bootstrap源码解读导航条(7)
2016/12/23 Javascript
Bootstrap表格制作代码
2017/03/17 Javascript
vue2实现数据请求显示loading图
2017/11/28 Javascript
Layui 解决表格异步调用后台分页的问题
2019/10/26 Javascript
[01:19:23]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第二场
2018/04/06 DOTA
简单了解python反射机制的一些知识
2019/07/13 Python
用django设置session过期时间的方法解析
2019/08/05 Python
pyenv与virtualenv安装实现python多版本多项目管理
2019/08/17 Python
django-crontab 定时执行任务方法的实现
2019/09/06 Python
Python self用法详解
2020/11/28 Python
智能家居、吸尘器、滑板车、电动自行车网上购物:Geekmaxi
2021/01/18 全球购物
前厅部经理岗位职责范文
2014/02/04 职场文书
超市开学活动方案
2014/03/01 职场文书
企业元宵节主持词
2014/03/25 职场文书
党校个人自我鉴定范文
2014/03/28 职场文书
《梅花魂》教学反思
2014/04/30 职场文书
名人传读书笔记
2015/06/26 职场文书
如何让vue长列表快速加载
2021/03/29 Vue.js
redis连接被拒绝的解决方案
2021/04/12 Redis
Oracle数据库事务的开启与结束详解
2022/06/25 Oracle