Penjelasan terperinci tentang pemindahan nilai bersama antara hadapan dan belakang menggunakan json_json

Jika terdapat terlalu banyak nilai untuk pemindahan nilai bersama antara bahagian hadapan dan bahagian belakang, penulisan akan menyusahkan, memenatkan dan terdedah kepada ralat. Berikut ialah satu set cara untuk menggunakan atribut tag tanda untuk menghantar nilai Pemerolehan nilai hujung belakang dan pengikatan bahagian hadapan telah dipermudahkan.

1. Tukar objek json kepada rentetan

Salin kod Kod adalah seperti berikut:

$.extend({
//Tukar objek json kepada rentetan [Nampaknya jquery tidak mempunyai kaedah ini]
          toJSONString: fungsi (objek) {
                 jika (objek == null)
                    kembali;
            jenis var = jenis objek;
                   jika ('objek' == jenis) {
Jika (Array == object.constructor) type = 'array';
                        jika tidak (RegExp == object.constructor) taip = 'regexp';
                      jenis lain = 'objek';
            }
suis (jenis) {
kes 'tidak ditentukan':
kes 'tidak diketahui':
                    kembali;
rehat;
'fungsi' kes:
kes 'boolean':
kes 'regexp':
                           return object.toString();
rehat;
'nombor' kes:
Kembalikan isFinite(objek) ? object.toString() : 'null';
rehat;
kes 'rentetan':
return '"' object.replace(/(\|")/g, "\$1").replace(/n|r|t/g, function () {
                      var a = argumen[0];
pulangkan (a == 'n') ? '\n' : (a == 'r') ?                              }) '"';
rehat;
'objek' kes:
Jika (objek === null) kembalikan 'null';
                  keputusan var = [];
untuk (sifat var dalam objek) {
                           nilai var = $.toJSONString(objek[harta]);
                         if (value !== undefined) results.push($.toJSONString(property) ':' value);
                     }
                     kembalikan hasil '{'.join(',') '}';
                     rehat;
                 'susunan' kes:
                     hasil var = [];
                     untuk (var i = 0; i                          nilai var = $.toJSONString(objek[i]);
                         if (value !== undefined) results.push(value);
                     }
                     kembalikan '[' results.join(',') ']';
                     rehat;
             }
         }
     });

二、创建数据容器对象 [用来绑定要传给后台的前台控件值]

复制代码 代码如下:

var DataClass = {
Cipta: fungsi () {
Kembalikan fungsi () {
This.myinit.apply (this, arguments); // Pembina objek penciptaan // Nama sistem pengumpulan parameter Arguments tidak boleh ditulis dengan salah
                 }
            }
}
var MyDataPack = DataClass.create();
MyDataPack.prototype = {
//Permulaan
MyInit: fungsi (url, operasi, params) {
This.data = new Object(); //Semua kapasiti data
              var bdata = new Object();
                      bdata.url = url;                         bdata.operation = operasi;//Operasi
                         bdata.params = params; This.data.BasicData = bdata; //Data asas
             },
//Tambah data seperti: addValue("obj", "111");
       addValue: fungsi (p, obj) {
This.data[p] = obj;
},
//Dapatkan nilai semua kawalan tanda dan tulis data
GetValueSetData: fungsi (togName) {
                   nilai var = Objek(); // Pengumpulan nilai
                         $("[subtag='" togName "']").setiap(fungsi () {
//Jika ia adalah kawalan jenis input
Jika (this.localName == "input") {
//Jika ia adalah kawalan teks
Jika (this.type == "text" || this.type == "tersembunyi") {
values[this.id] = this.value;
                                                                                                                                                                                                   jika tidak (ini.jenis == "...") {
                                                                                                                                                                   ...                     }
                          jika tidak (this.localName == "...") {
                    }
                                                                                                                                                                                                                                                         });
This.data[togName] = values;//Tambahkan pada pengumpulan data
             },
//Nilai seperti: getValue("BasicData")
GetValue: fungsi (p) {
                     kembalikan ini.data[p];
             },
//Dapatkan atau tetapkan url
GetUrl: fungsi (url) {
Jika (url)
This.data.BasicData["url"] = url;
                  lain
                              kembalikan this.data.BasicData["url"];
            }
,
//Tukar nilai kepada data objek rentetan
GetJsonData: fungsi () {
            kembalikan $.toJSONString(this.data);
}
}

3. Buat objek data hujung hadapan terikat [digunakan untuk membaca nilai yang dihantar dari latar belakang dan mengikatnya ke halaman hujung hadapan]

Salin kod Kod adalah seperti berikut:

var MyDataBinder = {
//Ikat data pada data kawalan: data tag: tag
Bind: fungsi (data, Tag) {
         var MJson = $.parseJSON(data);
//Hanya ikat tag bertanda
          $("[bindtag='" Tag "']").setiap(fungsi () {
Jika (this.localName == "input") {
                          jika (MJson[this.id]) //Jika nilai dihantar di latar belakang
$(this).attr("value", MJson[this.id]);
            }
               jika tidak (this.localName == "...") {
            }
                  //....
});
}
};

4. Contoh penggunaan

html bahagian hadapan:

Salin kod Kod adalah seperti berikut:

                                                                                                                                                                                                                                                                                                                                                  ...

           
            
& Lt; td & gt; & lt;                                              



Js bahagian hadapan:

Salin kod

Kod adalah seperti berikut:

//====================Contoh penggunaan============================ ============
var MyDataPack = new MyDataPack("Handler1.ashx", "CESHI", "");
MyDataPack.getValueSetData("subtag");//Tulis data kawalan ke dalam objek "subtag" ialah teg untuk mendapatkan nilai kawalan
//------------------Pindahkan nilai bahagian hadapan ke bahagian belakang----------------
$.post(MyDataPack.getUrl(), MyDataPack.getJsonData(), fungsi (data) {
//-------------------Ikat nilai latar belakang ke latar depan-----------------
MyDataBinder.Bind(data, "bind"); //"bind" ialah label
bagi kawalan yang akan diikat });

Balik pentas:

Salin kod Kod adalah seperti berikut:

public void ProcessRequest(HttpContext context)
{
Context.Response.ContentType = "text/plain";
//================================ Dapatkan nilai latar depan ========================== ==================================
//Oleh kerana apa yang diluluskan di latar belakang ialah rentetan ditukar objek json, jadi semua data diluluskan sebagai parameter
nilai var = konteks.Permintaan.Borang[0];
//Perlu memperkenalkan pemasangan System.Web.Extensions.dll
JavaScriptSerializer _jsSerializer = JavaScriptSerializer baharu();
//Tukar rentetan objek json kepada objek Kamus
Kamus> dic = _jsSerializer.Deserialize>>(nilai);
//Kini dic mengandungi semua nilai yang diluluskan dari meja depan, anda boleh menggunakannya walau bagaimanapun anda mahu.
Rentetan inp_2 = dic["subtag"]["inp_2"];//Dengan cara ini, nilai nilai kawalan dengan id inp_2 pada halaman hadapan diperoleh terus
//========= Hantarkan nilai ke kaunter hadapan ======= ==========================
Kamus dic2 = Kamus baharu();
dic2.Add("inp_1", "Ubah suai 1");//Di sini, hanya gunakan id kawalan yang sepadan untuk menghantar nilai
dic2.Add("inp_2", "Ubah suai 2");
dic2.Add("inp_3", "Ubah suai 3");
Context.Response.Write(_jsSerializer.Serialize(dic2));
}

Adakah anda semua mempunyai pemahaman yang jelas tentang menggunakan json untuk merealisasikan pemindahan nilai bahagian hadapan dan bahagian belakang Jika anda mempunyai sebarang pertanyaan, sila tinggalkan saya mesej