json_jsonを使用したフロントエンドとバックエンド間の相互値転送の詳細説明

フロントエンドとバックエンドの間で相互に値を転送するための値が多すぎると、書き込みが面倒で疲れ、エラーが発生しやすくなります。以下に、マーク タグ属性を使用して値を渡す一連の方法を示します。バックエンド値の取得とフロントエンド バインディングが大幅に簡素化されました。

1. json オブジェクトを文字列に変換します

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

$.extend({
//jsonオブジェクトを文字列に変換 [jqueryにはこのメソッドがないようです]
toJSONString: 関数 (オブジェクト) {
if (object == null)
return;
var type = オブジェクトのタイプ;
If ('オ​​ブジェクト' == 型) {
If (Array == object.constructor) type = 'array';
else if (RegExp == object.constructor) type = 'regexp';
else type = 'object';
}
スイッチ (タイプ) {
ケース「未定義」:
ケース「不明」:
return;
休憩;
ケース '関数':
ケース 'ブール値':
ケース '正規表現':
return object.toString();
休憩;
ケース '番号':
isFinite(object) を返しますか? object.toString() : 'null';
休憩;
ケース '文字列':
return '"' object.replace(/(\|")/g, "\$1").replace(/n|r|t/g, function () {
var a = argument[0];
return (a == 'n') ? '\n' : (a == 'r') ? '\r' : (a == 't') ? '"'; 休憩;
ケース 'オブジェクト':
If (object === null) return 'null';
var results = [];
for (オブジェクトの var プロパティ) {
var value = $.toJSONString(object[property]);
                         if (値 !== 未定義) results.push($.toJSONString(property) ':' value);
                     }
                     return '{' results.join(',') '}';
                     休憩;
                 ケース '配列':
                     var results = [];
                     for (var i = 0; i                          var value = $.toJSONString(object[i]);
                         if (値 !== 未定義) results.push(値);
                     }
                     return '[' results.join(',') ']';
                     休憩;
             }
         }
     });

二、创建データ容器对象 [用来绑要传给後台的前台控件值]

复制代码代码如下:

var DataClass = {
作成: function () {
戻り関数 () {
This.myinit.apply (this, argument); // 作成オブジェクトのコンストラクター // 引数のパラメーター収集システム名を間違って記述することはできません
}
}
}
var MyDataPack = DataClass.create();
MyDataPack.prototype = {
//初期化
MyInit: 関数 (URL、操作、パラメータ) {
This.data = new Object() //全データ容量
var bdata = new Object();
bdata.url = URL; bdata.operation = オペレーション;//オペレーション
bdata.params = params; This.data.BasicData = bdata; //基本データ
},
//次のようなデータを追加します: addValue("obj", "111");
addValue: function (p, obj) {
This.data[p] = obj;
}、
//すべてのマークコントロールの値を取得し、データを書き込みます
GetValueSetData: 関数 (togName) {
varvalues = Object() // 値のコレクション
$("[subtag='" togName "']").each(function () {
//入力型コントロールの場合
If (this.localName == "input") {
//テキストコントロールの場合
If (this.type == "text" || this.type == "hidden") {
値[this.id] = this.value;
} else if (this.type == "...") {
}                                                                                                                     }
else if (this.localName == "...") {
}
                                                                            });
This.data[togName] =values;//データコレクションに追加
},
//次のような値: getValue("BasicData")
GetValue: 関数 (p) {
return this.data[p];
},
// URL を取得または設定します
GetUrl: 関数 (URL) {
If (URL)
This.data.BasicData["url"] = url;
その他
return this.data.BasicData["url"];
}
、
//値を文字列オブジェクトに変換します data
GetJsonData: function () {
return $.toJSONString(this.data);
}
}

3. バインドされたフロントエンド データ オブジェクトを作成します (バックグラウンドから渡された値を読み取り、それをフロントエンド ページにバインドするために使用されます)

コードをコピーします コードは次のとおりです:

var MyDataBinder = {
//データを制御データにバインドします: data タグ: タグ
バインド: 関数 (データ、タグ) {
var MJson = $.parseJSON(data);
//マークされたタグのみをバインドします
$("[bindtag='" タグ "']").each(function () {
If (this.localName == "input") {
if (MJson[this.id]) //値がバックグラウンドで渡された場合
$(this).attr("値", MJson[this.id]);
}
else if (this.localName == "...") {
}
//....
});
}
};

4. 使用例

フロントエンド HTML:

コードをコピーします コードは次のとおりです:

<表>

                                                                                                                                                                                                                                                                                                       





                                                                                                                                                                                                                                                                                                     



フロントエンド js:

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

//====================使用例========================= ============
var MyDataPack = new MyDataPack("Handler1.ashx", "CESHI", "");
MyDataPack.getValueSetData("subtag");//オブジェクトにコントロールデータを書き込む "subtag"はコントロール値を取得するためのタグです
//-----------------フロントエンドの値をバックエンドに転送--------------
$.post(MyDataPack.getUrl(), MyDataPack.getJsonData(), 関数 (データ) {
//-------------------背景の値を前景にバインドします-----------------
MyDataBinder.Bind(data, "bind"); //「bind」はバインドされるコントロールのラベル
です });

舞台裏:

コードをコピーします コードは次のとおりです:

public void ProcessRequest(HttpContext context)
{
Context.Response.ContentType = "テキスト/プレーン";
//====================前景値を取得======================== == ====================
//バックグラウンドで渡されるのはjsonオブジェクトの変換された文字列なので、すべてのデータはパラメータとして渡されます
var 値 = context.Request.Form[0];
//アセンブリ System.Web.Extensions.dll を導入する必要があります
JavaScriptSerializer _jsSerializer = 新しい JavaScriptSerializer();
// json オブジェクト文字列を Dictionary オブジェクトに変換します
辞書<文字列, 辞書<文字列, 文字列>> dic = _jsSerializer.Deserialize<辞書<文字列, 辞書<文字列, 文字列>>>(値);
// これで、dic にはフロントデスクから渡されたすべての値が含まれるようになり、それらを自由に使用できます。
String inp_2 = dic["subtag"]["inp_2"];//これにより、フロントページのinp_2のidを持つ制御値の値が直接取得されます
//====================== フロントデスクに値を渡します=================== ===== =====================
辞書<文字列, 文字列> dic2 = 新しい辞書<文字列, 文字列>();
dic2.Add("inp_1", "Modify 1");//ここでは、対応するコントロール ID を使用して値を渡します
dic2.Add("inp_2", "変更 2");
dic2.Add("inp_3", "変更 3");
Context.Response.Write(_jsSerializer.Serialize(dic2));
}

フロントエンドとバックエンドの値の転送を実現するために json を使用することについて明確に理解していますか? ご質問がある場合は、メッセージを残してください