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

S'il y a trop de valeurs​​pour 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 :

<tableau>
<tr>
                                                                                                                                                                                                                                                                                            </tr>
<tr>
            <td id="td1"><input type="text" id="inp_1" subtag="subtag" bindtag="bind" /></td>
             <td id="td2"><input type="text" id="inp_2" subtag="subtag" value="Je suis juste en train de le tester" /></td>
                                                                                                                                                                                                                                                                  </table>



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<chaîne, Dictionnaire<chaîne, chaîne>> dic = _jsSerializer.Deserialize<Dictionnaire<chaîne, Dictionnaire<chaîne, chaîne>>>(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<chaîne, chaîne> dic2 = nouveau Dictionnaire<chaîne, chaîne>();
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

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn