如何使用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 相关文章推荐
js限制textarea每行输入字符串长度的代码
Oct 31 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
Mar 02 Javascript
jQuery Html控件基本操作(日常收集整理)
Mar 11 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
Oct 20 Javascript
js实现方块上下左右移动效果
Aug 17 Javascript
JavaScript生成简单等差数列
Nov 28 Javascript
javascript for循环性能测试示例
Aug 07 Javascript
element-ui table组件如何使用render属性的实现
Nov 04 Javascript
vue 动态表单开发方法案例详解
Dec 02 Javascript
JS中一些高效的魔法运算符总结
May 06 Javascript
小程序wx.getUserProfile接口的具体使用
Jun 02 Javascript
html5 录制mp3音频支持采样率和比特率设置
Jul 15 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
星际中一些鲜为人知的详细资料
2020/03/04 星际争霸
PHP 操作文件的一些FAQ总结
2009/02/12 PHP
用PHP将网址字符串转换成超链接(网址或email)
2010/05/25 PHP
基于jQuery的表格操作插件
2010/04/22 Javascript
父子窗体间传递JSON格式的数据的代码
2010/12/25 Javascript
jQuery中实现动画效果的基本操作介绍
2013/04/16 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
2013/04/16 Javascript
Javascript排序算法之计数排序的实例
2014/04/05 Javascript
js语法学习之判断一个对象是否为数组
2014/05/13 Javascript
jQuery动态创建html元素的常用方法汇总
2014/09/05 Javascript
jQuery实现ctrl+enter(回车)提交表单
2015/10/19 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
2016/04/06 Javascript
老生常谈Javascript中的原型和this指针
2016/10/09 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
2016/12/15 Javascript
JavaScript中创建对象的7种模式详解
2017/02/21 Javascript
Vue.JS项目中5个经典Vuex插件
2017/11/28 Javascript
jQuery实现定时隐藏对话框的方法分析
2018/02/12 jQuery
小程序云函数调用API接口的方法
2019/05/17 Javascript
Webpack 4如何动态切割JS注入文件名详解
2019/07/09 Javascript
解决layui checkbox 提交多个值的问题
2019/09/02 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
2020/07/14 Javascript
[01:04]DOTA2:伟大的Roshan雕塑震撼来临
2015/01/30 DOTA
[49:40]2018DOTA2亚洲邀请赛小组赛 A组加赛 TNC vs Newbee
2018/04/03 DOTA
[01:07:13]TNC vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python学习笔记之os模块使用总结
2014/11/03 Python
python时间序列按频率生成日期的方法
2019/05/14 Python
python实现动态创建类的方法分析
2019/06/25 Python
pycharm工具连接mysql数据库失败问题
2020/04/01 Python
AmazeUI 按钮交互的实现示例
2020/08/24 HTML / CSS
英国鲜花速递:Serenata Flowers
2018/04/03 全球购物
LINUX下线程,GDI类的解释
2012/04/17 面试题
给全校老师的建议书
2014/03/13 职场文书
秋季运动会演讲稿
2014/09/16 职场文书
2014年车间工作总结
2014/11/21 职场文书
CSS 制作波浪效果的思路
2021/05/18 HTML / CSS
CSS 实现Chrome标签栏的技巧
2021/08/04 HTML / CSS