Explication détaillée du transfert de valeur mutuelle entre le front et le backend à l'aide de json

Explication détaillée du transfert de valeur mutuelle entre le front et le backend à l'aide de json_json

WBOY

Libérer： 2016-05-16 16:22:02

original

1202 Les gens l'ont consulté

S'il y a trop de valeurspour un transfert mutuel de valeurs entre le front et le backend, l'écriture sera lourde, fatigante et sujette aux erreurs. Voici un ensemble de façons d'utiliser les attributs de balise de marquage pour transmettre des valeurs. L'acquisition de valeurs backend et la liaison frontend ont été considérablement simplifiées.

1. Convertir l'objet json en chaîne

Copier le code Le code est le suivant :

$.extend({
//Convertir l'objet json en chaîne [Il semble que jquery n'ait pas cette méthode]
          toJSONString : fonction (objet) {
                  if (object == null)
                    revenir ;
var type = type d'objet ;
Si ('objet' == type) {
Si (Array == object.constructor) type = 'array';
                        else if (RegExp == object.constructor) type = 'regexp';
                     else type = 'objet';
            }
commutateur (type) {
cas 'non défini' :
cas 'inconnu' :
                    revenir ;
pause;
cas 'fonction' :
cas 'booléen' :
cas 'regexp' :
                           return object.toString();
pause;
cas 'numéro' :
Renvoie isFinite(object) ? object.toString() : 'null';
pause;
cas 'chaîne' :
return '"' object.replace(/(\|")/g, "\$1").replace(/n|r|t/g, function () {
var a = arguments[0];
return (a == 'n') ?                                                                                                                '"'; pause;
cas 'objet' :
Si (object === null) renvoie 'null';
var résultats = [];
for (propriété var dans l'objet) {
var value = $.toJSONString(object[property]);
                         if (value !== undefined) results.push($.toJSONString(property) ':' value);
                     >
                     return '{' results.join(',') '}';
                     pause;
                 cas 'tableau' :
                     var résultats = [];
                     pour (var i = 0; i < object.length; i ) {
                         var valeur = $.toJSONString(object[i]);
                         if (value !== non défini) results.push(value);
                     >
                     return '[' results.join(',') ']';
                     pause;
             >
         >
     });

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

复制代码代码如下 :

var DataClass = {

Créer : fonction () {

Fonction de retour () {

This.myinit.apply (this, arguments); // Le constructeur de l'objet de création // Le nom du système de collecte de paramètres des arguments ne peut pas être mal écrit 

                 }

            }

>

var MonDataPack = DataClass.create();

MonDataPack.prototype = {

//Initialisation

MyInit : fonction (url, opération, paramètres) {

This.data = new Object(); //Toute la capacité des données

              var bdata = new Object();

                      bdata.url = url;
                       bdata.opération = opération;//Opération

                         bdata.params = params;
This.data.BasicData = bdata; //Données de base

             },

//Ajouter des données telles que : addValue("obj", "111");

       addValue : fonction (p, obj) {

This.data[p] = obj;

},

//Obtenir les valeurs de tous les contrôles de marque et écrire les données 

GetValueSetData : fonction (togName) {

                   varvalues ​​​​= Object( // Collection de valeurs 
);
                         $("[subtag='" togName "']").each(function () {

//S'il s'agit d'un contrôle de type entrée

Si (this.localName == "input") {

//S'il s'agit d'un contrôle texte

If (this.type == "text" || this.type == "hidden") {

valeurs[this.id] = this.value;

                                                                                                       }
                             else if (this.type == "...") {

                                                                                                       }
                                                                                                              
                    }

                            else if (this.localName == "...") {

                    }

                 });

This.data[togName] = valeurs;//Ajouter à la collecte de données
             },

//Valeur telle que : getValue("BasicData")

GetValue : fonction (p) {

                     return this.data[p];

             },

//Obtenir ou définir l'URL

GetUrl : fonction (url) {

Si (url)

This.data.BasicData["url"] = url;

                 autre

                              return this.data.BasicData["url"];

            }

,

//Convertir la valeur en données d'objet chaîne

GetJsonData : fonction () {

            return $.toJSONString(this.data);

>

>

3. Créez un objet de données front-end lié [utilisé pour lire la valeur transmise depuis l'arrière-plan et la lier à la page front-end]

Copier le code Le code est le suivant :

var MonDataBinder = {

// Lier les données aux données de contrôle : data tag : tag 

Lier : fonction (données, Tag) {

         var MJson = $.parseJSON(data);

// Lier uniquement les balises marquées 

           $("[bindtag='" Balise "']").each(function () {

Si (this.localName == "input") {

                              if (MJson[this.id]) //Si la valeur est transmise en arrière-plan 

$(this).attr("value", MJson[this.id]);

            }

               else if (this.localName == "...") {

            }

                  //....

        });

>

};

4. Exemples d'utilisation

HTML frontal :

Copier le code Le code est le suivant :

Js front-end :

Copier le code

Le code est le suivant :

//====================Exemple d'utilisation=========================== ============

var MyDataPack = new MyDataPack("Handler1.ashx", "CESHI", "");

MyDataPack.getValueSetData("subtag");//Écrire les données de contrôle dans l'objet "subtag" est la balise pour obtenir la valeur de contrôle

//------------------Transférer la valeur du front-end vers le back-end---------------

$.post(MyDataPack.getUrl(), MyDataPack.getJsonData(), fonction (données) {

//---------------------------------Lier la valeur d'arrière-plan au premier plan----------------

MyDataBinder.Bind(data, "bind"); //"bind" est l'étiquette 
 du contrôle à lier
});

En coulisses :

Copier le code Le code est le suivant :

public void ProcessRequest (contexte HttpContext)

{

Context.Response.ContentType = "text/plain";

//====================Obtenir la valeur de premier plan========================= == ====================

//Parce que ce qui est passé en arrière-plan est la chaîne convertie de l'objet json, donc toutes les données sont passées en paramètre 

var valeurs = context.Request.Form[0];

//Besoin d'introduire l'assembly System.Web.Extensions.dll

JavaScriptSerializer _jsSerializer = new JavaScriptSerializer();

//Convertir la chaîne d'objet json en objet Dictionnaire

Dictionnaire> dic = _jsSerializer.Deserialize>>(valeurs);

//Maintenant, dic contient toutes les valeurs transmises par la réception, vous pouvez les utiliser comme vous le souhaitez. 

String inp_2 = dic["subtag"]["inp_2"];//De cette façon, la valeur de contrôle avec l'identifiant de inp_2 sur la première page est directement obtenue 

//====================== Transmettez la valeur à la réception ==================== ===== =====================

Dictionnaire dic2 = nouveau Dictionnaire();

dic2.Add("inp_1", "Modify 1");//Ici, utilisez simplement l'identifiant de contrôle correspondant pour transmettre la valeur

dic2.Add("inp_2", "Modifier 2");

dic2.Add("inp_3", "Modifier 3");

Context.Response.Write(_jsSerializer.Serialize(dic2));

>

Avez-vous une compréhension claire de l'utilisation de json pour réaliser un transfert de valeur front-end et back-end ? Si vous avez des questions, veuillez me laisser un message