如何使用json在前后臺(tái)進(jìn)行數(shù)據(jù)傳輸實(shí)例介紹

更新時(shí)間：2013年04月11日 15:52:38 作者：

需要把這些輸入寫(xiě)入數(shù)據(jù)庫(kù)，這里就用到j(luò)son傳入，先看一下后臺(tái)如何生成要傳輸?shù)臄?shù)據(jù)，感興趣的朋友可以參考下，希望可以幫助到你

上一篇博客寫(xiě)到用javascript生成多組文本，可以讓數(shù)據(jù)的輸入不受顯示，現(xiàn)在我們需要把這些輸入寫(xiě)入數(shù)據(jù)庫(kù)，這里就用到j(luò)son傳入。

首先，我們來(lái)寫(xiě)一下后臺(tái)如何生成要傳輸?shù)臄?shù)據(jù)
[html]

復(fù)制代碼代碼如下:

 
function generateDtb() { 
//寫(xiě)入 
var txtName = document.getElementById("txtName").value; 
//創(chuàng)建數(shù)組 
var dtb = new Array(); 
//通過(guò)循環(huán)把數(shù)據(jù)寫(xiě)入到數(shù)組并返回 
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() { 
//寫(xiě)入 
var txtName = document.getElementById("txtName").value; 
//創(chuàng)建數(shù)組 
var dtb = new Array(); 
//通過(guò)循環(huán)把數(shù)據(jù)寫(xiě)入到數(shù)組并返回 
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; 
} 

把數(shù)組轉(zhuǎn)換成json串傳入到后臺(tái)：
[html]

復(fù)制代碼代碼如下:

 
$(function () { 
//點(diǎn)擊botton1 
$("#lbtnOK").click(function () { 
var url = "DiscountManger.aspx?ajax=1"; 
var dtb = generateDtb(); 
// var strName = document.getElementById("txtName").value; 
if (dtb == null) 
{ } 
else { 
//序列化對(duì)象 
var postdata = JSON.stringify(dtb); 
//異步請(qǐng)求 
$.post(url, { json: postdata }, function (json) { 
if (json) { 
jBox.tip("添加成功！", "提示"); 
location.reload(); 
} 
else { 
jBox.tip("添加失敗！", "提示"); 
location.reload(); 
} 
}, "json") 
} 
}); 
}); 
$(function () { 
//點(diǎn)擊botton1 
$("#lbtnOK").click(function () { 
var url = "DiscountManger.aspx?ajax=1"; 
var dtb = generateDtb(); 
// var strName = document.getElementById("txtName").value; 
if (dtb == null) 
{ } 
else { 
//序列化對(duì)象 
var postdata = JSON.stringify(dtb); 
//異步請(qǐng)求 
$.post(url, { json: postdata }, function (json) { 
if (json) { 
jBox.tip("添加成功！", "提示"); 
location.reload(); 
} 
else { 
jBox.tip("添加失?。?, "提示"); 
location.reload(); 
} 
}, "json") 
} 
}); 
}); 

在后臺(tái)的操作：
首先判斷是否需要傳輸數(shù)據(jù)
[html]

復(fù)制代碼代碼如下:

 
if (!IsPostBack) 
{ 
//判斷是否異步請(qǐng)求 
if (Request.QueryString["ajax"] == "1") 
{ 
ProcessRequest(); 
} 
if (!IsPostBack) 
{ 
//判斷是否異步請(qǐng)求 
if (Request.QueryString["ajax"] == "1") 
{ 
ProcessRequest(); 
} 

在這里進(jìn)行對(duì)數(shù)據(jù)的處理：
[html]

復(fù)制代碼代碼如下:

 
/// <summary> 
/// 處理異步請(qǐng)求 
/// </summary> 
private void ProcessRequest() 
{ 
//存入要填寫(xiě)的策略 
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()); 
//寫(xiě)入數(shù)據(jù)到數(shù)組 
arrDiscount.Add(enStrategyDiscount); 
} 
//寫(xiě)入數(shù)據(jù)到數(shù)據(jù)庫(kù) 
IStrategyBLL strategy = new StrategyBLL(); 
if (strategy.AddStrategyDiscount(arrDiscount)) 
{ 
Response.Write("true"); 
Response.End(); 
} 
else 
{ 
Response.Write("false"); 
Response.End(); 
} 
} 
/// <summary> 
/// 處理異步請(qǐng)求 
/// </summary> 
private void ProcessRequest() 
{ 
//存入要填寫(xiě)的策略 
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()); 
//寫(xiě)入數(shù)據(jù)到數(shù)組 
arrDiscount.Add(enStrategyDiscount); 
} 
//寫(xiě)入數(shù)據(jù)到數(shù)據(jù)庫(kù) 
IStrategyBLL strategy = new StrategyBLL(); 
if (strategy.AddStrategyDiscount(arrDiscount)) 
{ 
Response.Write("true"); 
Response.End(); 
} 
else 
{ 
Response.Write("false"); 
Response.End(); 
} 
} 

這里，我們需要把json轉(zhuǎn)換成datatable
[html]

復(fù)制代碼代碼如下:

 
/// <summary> 
/// Json轉(zhuǎn)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轉(zhuǎn)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; 
} 

這樣，就可以把數(shù)據(jù)無(wú)刷新的寫(xiě)入到數(shù)據(jù)庫(kù)。
當(dāng)然，如果我們有一個(gè)從數(shù)據(jù)庫(kù)讀取的datatable，如果通過(guò)json顯示在前臺(tái)呢。
首先，我們需要把datatable轉(zhuǎn)換為json數(shù)據(jù)
[html]

復(fù)制代碼代碼如下:

 
/// <summary> 
/// DataTable轉(zhuǎn)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轉(zhuǎn)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); 
} 

然后寫(xiě)回到前臺(tái)
[html]

復(fù)制代碼代碼如下:

 
/// <summary> 
/// 處理異步請(qǐng)求 
/// </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> 
/// 處理異步請(qǐng)求 
/// </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(); 
} 

在前臺(tái)接受顯示：
[html]

復(fù)制代碼代碼如下:

 
$(function() { 
//點(diǎn)擊botton1 
$("#botton1").click(function() { 
createTable(json); 
}); 
}); 
//顯示Json中的數(shù)據(jù) 
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() { 
//點(diǎn)擊botton1 
$("#botton1").click(function() { 
createTable(json); 
}); 
}); 
//顯示Json中的數(shù)據(jù) 
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向后臺(tái)傳輸數(shù)據(jù)和顯示后臺(tái)數(shù)據(jù)了，當(dāng)然，這種傳輸方式只是傳輸?shù)囊环N，如果是簡(jiǎn)單的字符串也可以用get和post進(jìn)行傳輸，但是，javascript本身具有不安全性和不穩(wěn)定行，對(duì)于一些比較重要的數(shù)據(jù)，建議還是尋找一些更可靠的方法。

您可能感興趣的文章: