Detaillierte Erläuterung der gegenseitigen Wertübertragung zwischen Front- und Backend mithilfe von json_json

Wenn zu viele Werte für die gegenseitige Wertübertragung zwischen Front- und Backend vorhanden sind, wird das Schreiben umständlich, ermüdend und fehleranfällig. Hier finden Sie eine Reihe von Möglichkeiten, Markierungs-Tag-Attribute zum Übergeben von Werten zu verwenden. Die Backend-Werterfassung und die Frontend-Bindung wurden erheblich vereinfacht.

1. JSON-Objekt in String konvertieren

Code kopieren Der Code lautet wie folgt:

$.extend({
//JSON-Objekt in String konvertieren [Es scheint, dass JQuery diese Methode nicht hat]
          toJSONString: Funktion (Objekt) {
                  if (object == null)
                    zurück;
            var type = typeof object;
If ('object' == type) {
If (Array == object.constructor) type = 'array';
                        else if (RegExp == object.constructor) type = 'regexp';
                     else type = 'object';
            }
Schalter (Typ) {
Fall 'undefiniert':
Fall 'unbekannt':
                    zurück;
Pause;
case 'function':
case 'boolean':
case 'regexp':
                           return object.toString();
Pause;
Fallnummer:
Rückgabe isFinite(object) ? object.toString() : 'null';
Pause;
case 'string':
return '"' object.replace(/(\|")/g, "\$1").replace(/n|r|t/g, function () {
                      var a = arguments[0];
return (a == 'n') ? '\n' : (a == 'r') ? '\r' : (a == 't') : ""
'"; Pause;
Fall 'Objekt':
If (object === null) return 'null';
                  var results = [];
for (var-Eigenschaft im Objekt) {
                        var value = $.toJSONString(object[property]);
                         if (Wert !== undefiniert) results.push($.toJSONString(property) ':' value);
                     }
                     return '{' results.join(',') '}';
                     Pause;
                 case 'array':
                     var results = [];
                     for (var i = 0; i < object.length; i ) {
                         var value = $.toJSONString(object[i]);
                         if (Wert !== undefiniert) results.push(Wert);
                     }
                     return '[' results.join(',') ']';
                     Pause;
             }
         }
     });

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

复制代码 代码如下:

var DataClass = {
Erstellen: Funktion () {
Rückgabefunktion () {
This.myinit.apply (this, arguments); // Der Konstruktor des Erstellungsobjekts // Der Name des Parametersammlungssystems von Arguments darf nicht falsch geschrieben werden
                 }
            }
}
var MyDataPack = DataClass.create();
MyDataPack.prototype = {
//Initialisierung
MyInit: Funktion (URL, Vorgang, Parameter) {
This.data = new Object(); //Alle Datenkapazitäten
              var bdata = new Object();
                      bdata.url = url;                        bdata.operation = operation;//Operation
                         bdata.params = params; This.data.BasicData = bdata; //Basisdaten
             },
//Daten hinzufügen wie: addValue("obj", "111");
       addValue: Funktion (p, obj) {
This.data[p] = obj;
},
//Erhalte die Werte aller Markierungssteuerelemente und schreibe Daten
GetValueSetData: Funktion (togName) {
                   var value = Object(); // Sammlung von Werten
                         $("[subtag='" togName "']").each(function () {
//Wenn es sich um ein Eingabetyp-Steuerelement handelt
If (this.localName == "input") {
//Wenn es sich um ein Textsteuerelement handelt
If (this.type == "text" || this.type == "hidden") {
Werte[this.id] = this.value;
                                                                                                   }                              else if (this.type == "...") {
                                                                                                   }                                                                                                                                     }
                            else if (this.localName == "...") {
                    }
                                                                                             });
This.data[togName] = Werte;//Zur Datensammlung hinzufügen
             },
//Wert wie: getValue("BasicData")
GetValue: Funktion (p) {
                     return this.data[p];
             },
//URL abrufen oder festlegen
GetUrl: Funktion (URL) {
Wenn (URL)
This.data.BasicData["url"] = url;
                 sonst
                              return this.data.BasicData["url"];
            }
,
//Konvertieren Sie den Wert in String-Objektdaten
GetJsonData: Funktion () {
            return $.toJSONString(this.data);
}
}

3. Erstellen Sie ein gebundenes Front-End-Datenobjekt [wird verwendet, um den vom Hintergrund übergebenen Wert zu lesen und ihn an die Front-End-Seite zu binden]

Code kopieren Der Code lautet wie folgt:

var MyDataBinder = {
//Daten an die Steuerdaten binden: Daten-Tag: Tag
Bind: Funktion (Daten, Tag) {
         var MJson = $.parseJSON(data);
//Nur markierte Tags binden
           $("[bindtag='" Tag "']").each(function () {
If (this.localName == "input") {
                              if (MJson[this.id]) //Wenn der Wert im Hintergrund übergeben wird
$(this).attr("value", MJson[this.id]);
            }
               else if (this.localName == "...") {
            }
                  //....
        });
}
};

4. Anwendungsbeispiele

Front-End-HTML:

Code kopieren Der Code lautet wie folgt:

<Tabelle>
<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="Ich teste es nur" /></td>
                                                                                                                                                                                                                                                        </table>



Front-End-JS:

Code kopieren

Der Code lautet wie folgt:

//====================Anwendungsbeispiel========================= ============
var MyDataPack = new MyDataPack("Handler1.ashx", "CESHI", "");
MyDataPack.getValueSetData("subtag");//Schreiben Sie die Steuerdaten in das Objekt „subtag“ ist das Tag, um den Steuerwert zu erhalten
//------------------Übertragen Sie den Front-End-Wert an das Back-End---------------
$.post(MyDataPack.getUrl(), MyDataPack.getJsonData(), function (data) {
//-------------------Binden Sie den Hintergrundwert an den Vordergrund-----------------
MyDataBinder.Bind(data, "bind"); //"bind" ist die Bezeichnung
des zu bindenden Steuerelements });

Backstage:

Code kopieren Der Code lautet wie folgt:

public void ProcessRequest(HttpContext context)
{
Context.Response.ContentType = "text/plain";
//====================Erhalte den Vordergrundwert======================== == ====================
//Da im Hintergrund die konvertierte Zeichenfolge des JSON-Objekts übergeben wird, werden alle Daten als Parameter
übergeben var-Werte = context.Request.Form[0];
//Muss die Assembly System.Web.Extensions.dll einführen
JavaScriptSerializer _jsSerializer = new JavaScriptSerializer();
// JSON-Objektzeichenfolge in Wörterbuchobjekt konvertieren
Dictionary<string, Dictionary<string, string>> dic = _jsSerializer.Deserialize<Dictionary<string, Dictionary<string, string>>>(values);
// Jetzt enthält dic alle von der Rezeption übergebenen Werte. Sie können sie nach Belieben verwenden.
String inp_2 = dic["subtag"]["inp_2"];//Auf diese Weise wird der Steuerwertwert mit der ID von inp_2 auf der Startseite direkt erhalten
//====================== Geben Sie den Wert an die Rezeption weiter=================== ===== =====================
Wörterbuch<string, string> dic2 = neues Wörterbuch<string, string>();
dic2.Add("inp_1", "Modify 1");//Hier verwenden Sie einfach die entsprechende Steuer-ID, um den Wert zu übergeben
dic2.Add("inp_2", "Modify 2");
dic2.Add("inp_3", "Modify 3");
Context.Response.Write(_jsSerializer.Serialize(dic2));
}

Haben Sie ein klares Verständnis für die Verwendung von JSON zur Realisierung der Front-End- und Back-End-Wertübertragung? Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht