如何使用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操作userdata
Apr 27 Javascript
JQuery实现自定义对话框的代码
Jun 15 Javascript
js下利用控制器载入对应脚本
Jul 17 Javascript
javascript使用activex控件的代码
Jan 27 Javascript
jquery复选框多选赋值给文本框的方法
Jan 27 Javascript
jQuery获得字体颜色16位码的方法
Feb 20 Javascript
Vue.js每天必学之构造器与生命周期
Sep 05 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
Dec 13 Javascript
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
基于js 各种排序方法和sort方法的区别(详解)
Jan 03 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
Sep 21 Javascript
ES6基础之默认参数值
Feb 21 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
php Try Catch异常测试
2009/03/01 PHP
如何正确配置Nginx + PHP
2016/07/15 PHP
php学习笔记之mb_strstr的基本使用
2018/02/03 PHP
PHP实现转盘抽奖算法分享
2020/04/15 PHP
ThinkPHP5.0框架验证码功能实现方法【基于第三方扩展包】
2019/03/11 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
asp javascript 实现关闭窗口时保存数据的办法
2007/11/24 Javascript
js刷新框架子页面的七种方法代码
2008/11/20 Javascript
JQuery 绑定事件时传递参数的实现方法
2009/10/13 Javascript
使用闭包对setTimeout进行简单封装避免出错
2013/07/10 Javascript
jQuery提交多个表单的小技巧
2014/07/27 Javascript
js实现鼠标点击文本框自动选中内容的方法
2015/08/20 Javascript
JS ES6多行字符串与连接字符串的表示方法
2017/04/26 Javascript
Angular 容器部署的方法
2018/04/17 Javascript
JavaScript+H5实现微信摇一摇功能
2018/05/23 Javascript
详解微信小程序之scroll-view的flex布局问题
2019/01/16 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
2019/05/20 Javascript
微信小程序开发之左右分栏效果的实例代码
2019/05/20 Javascript
关于引入vue.js 文件的知识点总结
2020/01/28 Javascript
[15:28]DOTA2 HEROS教学视频教你分分钟做大人-剧毒术士
2014/06/13 DOTA
Python实现的HTTP并发测试完整示例
2020/04/23 Python
简单了解Python中的几种函数
2017/11/03 Python
django rest framework使用django-filter用法
2020/07/15 Python
css3 2D图片转动样式可以扩充到Js当中
2014/04/29 HTML / CSS
俄罗斯最大的消费电子连锁零售商:Mvideo
2017/06/25 全球购物
20世纪40年代连衣裙和复古服装:The Seamstress Of Bloomsbury
2018/07/24 全球购物
HomeAway英国:全球领先的度假租赁在线市场
2020/02/03 全球购物
2014年防汛工作总结
2014/12/08 职场文书
学雷锋献爱心活动总结
2015/05/11 职场文书
2015国庆66周年宣传语
2015/07/14 职场文书
车间班组长竞聘书
2015/09/15 职场文书
解决Navicat for Mysql连接报错1251的问题(连接失败)
2021/05/27 MySQL
浅谈JS的原型和原型链
2021/06/04 Javascript
Java 获取Word中所有的插入和删除修订的方法
2022/04/06 Java/Android
js判断两个数组相等的5种方法
2022/05/06 Javascript
Redis基本数据类型String常用操作命令
2022/06/01 Redis