如何使用json在前后臺(tái)進(jìn)行數(shù)據(jù)傳輸實(shí)例介紹
首先,我們來(lái)寫(xiě)一下后臺(tái)如何生成要傳輸?shù)臄?shù)據(jù)
[html]
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]
$(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]
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]
/// <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]
/// <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]
/// <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]
/// <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]
$(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ù),建議還是尋找一些更可靠的方法。
相關(guān)文章
如何基于filter實(shí)現(xiàn)網(wǎng)站整體變灰功能
這篇文章主要介紹了如何基于filter實(shí)現(xiàn)網(wǎng)站整體變灰功能,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-04-04事件綁定之小測(cè)試 onclick && addEventListener
昨晚回去后,和雷子討論如何才能“檢測(cè)”到頁(yè)面上某個(gè)元素都綁定了哪些事件監(jiān)聽(tīng)函數(shù),第一感覺(jué)就是應(yīng)該從瀏覽器入手,比如FF,或者Chrome等2011-07-07文本框中禁止非數(shù)字字符輸入比如手機(jī)號(hào)碼、郵編
總是遇到很多禁止非數(shù)字字符輸入的文本框,比如手機(jī)號(hào)碼了 郵編了于是下面為大家介紹下如何禁止,感興趣的朋友可以了解下2013-08-08利用原生js和jQuery實(shí)現(xiàn)單選框的勾選和取消操作的方法
下面小編就為大家?guī)?lái)一篇利用原生js和jQuery實(shí)現(xiàn)單選框的勾選和取消操作的方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09uniapp微信小程序無(wú)法獲取Vue.prototype值的解決方法
在uniapp開(kāi)發(fā)過(guò)程中,各端的一些高度會(huì)有區(qū)別,為了方便就要統(tǒng)一放到全局變量中,下面這篇文章主要給大家介紹了關(guān)于uniapp微信小程序無(wú)法獲取Vue.prototype值的解決方法,需要的朋友可以參考下2022-10-10js對(duì)文章內(nèi)容進(jìn)行分頁(yè)示例代碼
這篇文章主要介紹了使用js對(duì)文章內(nèi)容進(jìn)行分頁(yè)的具體實(shí)現(xiàn),需要的朋友可以參考下2014-03-03微信小程序獲取用戶(hù)綁定手機(jī)號(hào)方法示例
這篇文章主要給大家介紹了關(guān)于微信小程序如何獲取用戶(hù)綁定手機(jī)號(hào)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07用json方式實(shí)現(xiàn)在 js 中建立一個(gè)map
這篇文章主要介紹了用json方式實(shí)現(xiàn)在javascript / js 中建立一個(gè)map,需要的朋友可以參考下2014-05-05基于javascript實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘效果
這篇文章主要為大家詳細(xì)介紹了基于javascript實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘效果的相關(guān)資料,動(dòng)態(tài)顯示系統(tǒng)當(dāng)前時(shí)間,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-02-02