フロントおよびバックエンド JavaScript スキルでのデータ送信に json を使用する方法の紹介

前回のブログでは、JavaScript を使用して複数のテキスト グループ を生成することについて書きました。これにより、データ入力が表示されなくなる可能性があります。ここでは、これらの入力をデータベースに書き込む必要があります。ここでは、json を使用して渡します。彼らは入っています。

まず、バックグラウンドで送信するデータがどのように生成されるのかを書きましょう
[html]

コードをコピー コードは次のとおりです。

functiongenerateDtb() {
//Write
var txtName = document.getElementById("txtName").value; Create array
var dtb = new Array();
//ループを通じてデータを配列に書き込み、
for (var i = 0; i var row = new Object();
row.Name = txtName;
row.discount = SecondGroup[i].value; Push( row);
return dtb;
}
function generatedDtb() {
//Write
var txtName = document.getElementById("txtName").value;
// 配列を作成します
var dtb = new Array();
// ループを通じてデータを配列に書き込み、
for (var i = 0; i var row = new Object();
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 = generatedDtb( );

// 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("正常に追加されました! ", "tip");
location.reload();
}
else {
jBox.tip("追加に失敗しました!", "tip");
location.reload( );
}
}, "json")
}
});
$(function () {
// ボタン 1
をクリックします$("#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("追加に失敗しました!", "ヒント"); }
}, "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); int i = 0; newdtb.Rows.Count; i )
{
Entity.StrategyDiscount = new Entity.StrategyDiscount(); 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(); ))
{
Response.Write("true");
Response.End();
}
else
{
Response.Write("false" ) ;
Response.End();
}
}
///
/// 非同期リクエストの処理
/// private void ProcessRequest()
{
//入力するポリシーを保存します
ArrayList arrDiscount = new ArrayList();
Response.ContentType = "text/html"; json = Request.Form["json"];
//DataTable を逆シリアル化します
if (json == null)
{
return;
else
{
DataTable 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.End();
else
{
Response.Write("false");
Response.End();
}
}


ここでは、json Convert を配置する必要がありますデータテーブルへ
[html]




コードをコピー


コードは次のとおりです:

/ //

/// Json から DataTable へ

/// /// // / private DataTable Json2Dtb(string json) { JavaScriptSerializer jss = 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 (drow.Keys の文字列キー)
{
dtb.Columns.Add(key, drow[key].GetType () );
}
}
DataRow row = dtb.NewRow();
foreach (drow.Keys の文字列キー)
{
row[key] = drow[キー] ;
}
dtb.Rows.Add(row)
}
}
///
// / Json から DataTable へ
///
///
/// ;
private DataTable Json2Dtb(string json)
{
JavaScriptSerializer jss = new JavaScriptSerializer();
ArrayList dic = jss.Deserialize(json); new DataTable ();
if (dic.Count > 0)
{
foreach (Dictionary drow in dic)
{
if (dtb.Columns.Count) == 0)
{
foreach (drow.Keys の文字列キー)
{
dtb.Columns.Add(key, drow[key].GetType());
}
DataRow row = dtb.NewRow();
foreach (drow.Keys の文字列キー)
{
row[key] = drow[key]} dtb .Rows.Add(row);
}
}
return dtb;
}


このようにして、データをデータベースに書き込むことができます。爽やかな。
もちろん、データベースから読み取ったデータテーブルがある場合、それが json を通じてフォアグラウンドに表示されたらどうなるでしょうか。
まず、データテーブルを json データに変換する必要があります
[html]




コードをコピー


コードは次のとおりです以下:

///
/// DataTable转Json
///
///
///
プライベート文字列 Dtb2Json(DataTable dtb)
{
JavaScriptSerializer jss = new JavaScriptSerializer();
ArrayList dic = new ArrayList();
foreach (dtb.Rows の DataRow 行)
{
Dictionary drow = new Dictionary();
foreach (dtb.Columns の DataColumn 列)
{
drow.Add(col.ColumnName, row[col.ColumnName]);
}
dic.Add(drow);
}
return jss.Serialize(dic);
}
///
/// DataTable转Json
///
///
///
プライベート文字列 Dtb2Json(DataTable dtb)
{
JavaScriptSerializer jss = new JavaScriptSerializer();
ArrayList dic = new ArrayList();
foreach (dtb.Rows の DataRow 行)
{
Dictionary drow = new Dictionary();
foreach (dtb.Columns の DataColumn 列)
{
drow.Add(col.ColumnName, row[col.ColumnName]);
}
dic.Add(drow);
}
return jss.Serialize(dic);
}

その後写回前台
[html]

复制代代码如下:

///

/// 处理异步请求
///

private void ProcessRequest()
{
Response.ContentType = "text/html";
string json = Request.Form["json"];
//反順序列化DataTable
DataTable newdtb = Json2Dtb(json);
//配列化DataTable forJSON
string back = Dtb2Json(newdtb);
Response.Write(back);
Response.End();
}
///
/// 处理异步请求
///
private void ProcessRequest()
{
Response.ContentType = "text/html";
string json = Request.Form["json"];
//反順序列化DataTable
DataTable newdtb = Json2Dtb(json);
//配列化DataTable forJSON
string back = Dtb2Json(newdtb);
Response.Write(back);
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 (o1 のキー) {
var td = $("");
td.text(o1[key].toString());
td.appendTo(行);
}
row.appendTo(テーブル);
}
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 (o1 のキー) {
var td = $("");
td.text(o1[key].toString());
td.appendTo(行);
}
row.appendTo(テーブル);
}
table.appendTo($("#back"));
}

これで、json 方向後台転送データと表示後の設置が完了します。当然、このような転送方法は転送の 1 つであり、場合によっては文字列も使用できます。 get と post は転送を実行しますが、JavaScript 自体には安全性と不規則な動作があり、一部の重要なデータに対しては、より安全なメソッドも推奨されています。