如何使用json在前後台進行資料傳輸實例介紹_javascript技巧

上一篇部落格寫到用javascript產生多組文字，可以讓資料的輸入不受顯示，現在我們需要把這些輸入寫入資料庫，這裡就用到json傳入。

首先，我們來寫一下後台如何生成要傳輸的數據
[html]

複製代碼 程式碼如下:

function generateDtb() {
//寫入
var txtName = document.getElementById("txtName").value;
//建立陣列
var dtb = new Array();
//透過循環把資料寫入到陣列並回傳
for (var i = 0; i var row = new Object();
row.Name = txtName;
row.fullMoney = firstGroup[i].value;
row.discount = secondGroup[i].value;
dtb.push(row(row );
}
return dtb;
}
function generateDtb() {
//寫入
var Name = document.getElementById("txtName").value; >//建立陣列
var dtb = new Array();
//透過循環把資料寫入陣列並回傳
for (var i = 0; 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 /點擊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
$(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]

複製代碼程式碼如下:

///

/// 處理非同步請求
///

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);
; i = 0; i {
Entity.StrategyDiscount enStrategyDiscount = new Entity.StrategyDiscount();
//折扣方案名稱//商店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 (strategyBLL stStrateDiscount);
{
Response.Write("true");
Response.End();
}
else
{
Response.Write("false"); 🎜>Response.End();
}
}
///

/// 處理非同步請求
///

private void ProcessRequest ()
{
//存入要填寫的策略
ArrayList arrDiscount = new ArrayList();
Response.ContentType = "text/html";
string json = Request.Form ["json"];
//反序列化DataTable
if (json == null)
{
return;
}
else
{
DataTableTable newdtb = Json2Dtb(json);
for (int i = 0; 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]

複製代碼 代碼如下: ///

/// Json轉DataTable

///
///
///
private DataTable Json2Dtb(string json)
{
JavaScriptSerializer jss = new JavaScriptSerializer();
ArrayList dic = jss.Deserialize(json);
DataTable dtb>DataTable(new); 🎜>if (dic.Count > 0)
{
foreach (Dictionary 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;
}
///

/// Json轉DataTable
///

///
///
private DataTable Json2Dtb(string json)
{
JavaScriptSerializer j =ssScriptSerializer j =ss new JavaScriptSerializer();
ArrayList dic = jss.Deserialize(json);
DataTable dtb = new DataTable();
if (dic.Count > 0)
{
foreach (Dictionary drow in dic)
{
if (dtb.Columns.Count == 0)
{
foreach (string key in drow.Keys)
{
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]

複製程式碼 程式碼複製程式碼

程式碼

///
/// DataTable轉Json
/// ;
///
/// 返回>
私有字串Dtb2Json(DataTable dtb)
{
JavaScriptSerializer jss = new JavaScriptSerializer();
ArrayList dic = new ArrayList();
foreach（dtb.Rows 中的DataRow 行）
{
字典; drow = new Dictionary();
foreach (DataColumn col in dtb. Columns)
{
drow.Add(col.ColumnName, row[col.ColumnName]);
}
dic.Add(drow);
}
return jss.Serialize (dic);
}
/// ;
/// DataTable轉Json
/// ;
///
/// 返回>
私有字串Dtb2Json(DataTable dtb)
{
JavaScriptSerializer jss = new JavaScriptSerializer();
ArrayList dicdic = new ArrayList();
foreach（dtb.Rows 中的DataRow 行）
{
字典; drow = new Dictionary();
foreach (DataColumn col in dtb.Columns)
{
drow.Add(col.ColumnName, row[col.ColumnName]);
}
dic.Add(drow);
}
}
dic.Add(drow);
}

return jss.Serialize(dic);
}

然後寫回前台[html]

代碼如下：


///

;
/// 處理非同步請求
///

;
private void ProcessRequest()
{
Response.ContentType = "text/html";
字串json = Request.Form["json"];
//反序列化DataTable
DataTable newdtb = Json2Dtb(json);
//序列化DataTable為JSON
string back = Dtb2Json(newdtb);
Response.Write(返回);
Response.End);
}
/// ;
/// 處理非同步請求
/// ;
private void ProcessRequest()
{
Response .ContentType = "text/html";
字串json = Request.Form["json"];
//反序列化DataTable
DataTable newdtb = Json2Dtb(json);
//序列化DataTable為JSON
string back = Dtb2Json(newdtb);
Response.Write(返回);
Response.End();

}


在前台🎜>在前台🎜>在前台🎜>在前台🎜>在前台🎜>在前台🎜>在前台🎜>在前台🎜>在前台🎜>在前台🎜>在前台🎜>在前台🎜>在前台🎜>在前台🎜>在前台🎜>在前台🎜>在前台🎜>在前台🎜>在前台🎜>在前台🎜>在前台🎜>在前台🎜>。接受顯示：

[html] 複製代碼

代碼如下：


$(function () {
//點擊botton1
$("#botton1").click(function() {
createTable(json);
});
});
//顯示Json中的資料
function createTable(json) {
var table = $("");
for (var i = 0; i o1 = json[i];
var row = $("");
for (key in o1) {
var td = $("");
td.text(o1[key].toString());
td.appendTo(行);
}
row.appendTo(table);
}
table.appendTo($("#back"));
}
$(function() {
//點擊botton1
$("#botton1").click(function() {
createTable(json);
})
});
//顯示Json中的資料
function createTable( json) {
var table = $("");
for (var i = 0; i o1 = json[i];
var row = $("");
for (key in o1) {
var td = $("");
td.text(o1[key].toString());
td.appendTo(行);
}
row.appendTo(table);
}
table.appendTo($("#back"));

}
這樣，就完成了json向後台傳輸資料和顯示後台資料了，當然，這種傳輸方式只是傳輸的一種，如果是簡單的字串也可以用get和post進行傳輸，但是，javascript本身俱有不安全性和不穩定行，對於一些比較重要的數據，建議還是尋找一些更可靠的方法。