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

上一篇博客写到用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本身具有不安全性和不稳定行，对于一些比较重要的数据，建议还是寻找一些更可靠的方法。

时间： 2024-11-03 21:56:01

如何使用json在前后台进行数据传输实例介绍_javascript技巧的相关文章

BootStrap响应式导航条实例介绍_javascript技巧

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷.响应式导航条就是可以在不同的设备下查看不同的效果. 下面给大家分享代码: <header role="banner"> <nav role="navigation" class="navbar navbar-default"> <div c

json原理分析及实例介绍_javascript技巧

这次在项目中前后台的数据交互中用到了json,经过这段时间的使用,大概了解了一下,简单总结一下json. JSON:JavaScript 对象表示法(JavaScript Object Notation). JSON 是存储和交换文本信息的语法.类似 XML. JSON 比 XML 更小.更快,更易解析. 和 XML 一样,JSON 也是基于纯文本的数据格式.由于 JSON 天生是为 JavaScript 准备的,因此,JSON 的数据格式非常简单,您可以用 JSON 传输一个简单的 Strin

window.opener用法和用途实例介绍_javascript技巧

window.opener,是通过window.open打开子窗体的父窗体的引用. 比如在父窗体parentForm里面,通过window.open("subForm.html"),那么在subform.html中window.opener就代表parentForm.既然在子窗体中能够拿到父窗体的引用,那么就可以在子窗体中设置父窗体的字段值或者调用js方法. 实例:添加人员信息时,其中的机构信息通过子窗体完成输入 父亲窗体,用于添加人员信息. 子窗体完成输入后,机构信息(id.name

js读取json的两种常用方法示例介绍_javascript技巧

方法一:js中最著名的eval方法 复制代码 代码如下: var strJson="{name:'张三'}";//json var obj=eval("("+strJson+")");//转换后的json对象 alert(obj.name);//json name 此方法需要注意的是: 对象表达式{'name':'张三'}必须用"()"扩住,否则 复制代码 代码如下: var strJSON = "{name:'张三

Javascript oop设计模式 面向对象编程简单实例介绍_javascript技巧

Javascript oop设计模式 面向对象编程 最初我们写js代码的时候是这么写 function checkName(){ //验证姓名 } function checkEmail(){ //验证邮箱 } function checkPassword(){ //验证密码 } 这种方式会造成全局变量的严重污染,再过渡到 var checkObject = { checkName : function(){}; checkEmail: function(){}; checkPassword:

利用js的Node遍历找到repeater的一个字段实例介绍_javascript技巧

js部分: 复制代码 代码如下: var checkboxs = document.getElementsByTagName("input"); for(var i=0;i<checkboxs.length;i++) { if(checkboxs[i].type=="checkbox" && checkboxs[i].checked==true){ var trobj=checkboxs[i].parentNode.parentNode; //

同时使用n个window onload加载实例介绍_javascript技巧

复制代码 代码如下: /* 1.obj相当于window 2.type相当于onload 3.fn相当于匿名函数 */ function addEvent( obj,type,fn ){ var saved = null; // 用户保存上一个事件 if( typeof obj[ "on" + type ] == "function" ){ saved = obj[ "on" + type ]; // 用户保存上一个事件 }; // 执行事件  

js控制的遮罩层实例介绍_javascript技巧

闲来无事,把项目里很土的弹窗,改成了遮罩层显示,感觉效果好点了.上代码: 父页面: 复制代码 代码如下: <div id='newDiv1' style="display: none;"> <%@include file='/WEB-INF/jsp/infobackup/martyr/printCertDia.jsp' %> <%--<jsp:include page="/WEB-INF/jsp/infobackup/martyr/prin

js操纵跨frame的三级联动select下拉选项实例介绍_javascript技巧

运用HTML.CSS以及Javascript相关知识,编写多窗口多菜单的内容联动. 考察学生关于frame.浏览器对象,以及表单控件的概念,javascript事件触发机制和程序设计, 以及用CSS来组织文字展示的掌握程度,使学生对DHTML有更加深刻的理解. 实验内容[必做] (1)建立一个包含三个frame的窗口 (2)第一个frame1中包含一个select,内容是中国的各个省 (3)第二个frame2中同样含有一个select,内容是各省的地级市 (4)第三个frame3用来显示关于某地