json_json을 이용한 프론트엔드와 백엔드 간의 상호 가치 전달에 대한 자세한 설명

프런트엔드와 백엔드 간의 상호 가치 전달을 위한 값이 너무 많으면 작성이 번거롭고 피곤하며 오류가 발생하기 쉽습니다. 다음은 마크 태그 속성을 사용하여 값을 전달하는 일련의 방법입니다. 백엔드 값 획득 및 프런트엔드 바인딩이 크게 단순화되었습니다.

1. json 객체를 문자열로 변환

코드 복사 코드는 다음과 같습니다.

$.extend({
//json 객체를 문자열로 변환 [jquery에는 이 메소드가 없는 것 같습니다]
          toJSONString: 함수(객체) {
                  if (객체 == null)
                    반품;
            var type = 객체 유형;
If ('객체' == 유형) {
If (Array == object.constructor) type = 'array';
                       else if (RegExp == object.constructor) type = 'regexp';
                     else type = '객체';
            }
스위치(유형) {
'정의되지 않음':
사례 '알 수 없음':
                    반품;
휴식;
케이스 '함수':
사례 '부울':
사례 'regexp':
                          return object.toString();
휴식;
사례 '번호':
isFinite(object) ? object.toString() : 'null';
휴식;
케이스 '문자열':
return '"' object.replace(/(\|")/g, "\$1").replace(/n|r|t/g, function () {
                      var a = 인수[0];
return (a == 'n') ? '\n' : (a == 'r') ? '\r' : (a == 't') ? '\t' : ""
'"'; 휴식;
케이스 '개체':
(객체 === null)인 경우 'null'을 반환합니다.
                  var 결과 = [];
for(객체의 var 속성) {
                        var value = $.toJSONString(object[property]);
                         if (값 !== 정의되지 않음) results.push($.toJSONString(property) ':' value);
                     }
                     return '{' results.join(',') '}';
                     휴식;
                 케이스 '배열':
                     var 결과 = [];
                     for (var i = 0; i                          var 값 = $.toJSONString(object[i]);
                         if (값 !== 정의되지 않음) results.push(값);
                     }
                     return '[' results.join(',') ']';
                     휴식;
             }
         }
     });

이것,创建数据容器对象 [사용来绑定要传给后台的前台控件值]

复主代码 代码如下:

var DataClass = {
만들기: 함수 () {
반환 함수() {
This.myinit.apply (this, 인수); // 생성 객체의 생성자 // 인수의 매개변수 수집 시스템 이름은 잘못 쓸 수 없습니다
                 }
            }
}
var MyDataPack = DataClass.create();
MyDataPack.prototype = {
//초기화
MyInit: 함수(url, 연산, 매개변수) {
This.data = new Object(); //모든 데이터 용량
              var bdata = new Object();
                      bdata.url = url;                       bdata.eration = 작업;//작업
                        bdata.params = params; This.data.BasicData = bdata; //기본 데이터
             },
//다음과 같은 데이터를 추가합니다: addValue("obj", "111");
       addValue: 함수(p, obj) {
This.data[p] = obj;
},
//모든 마크 컨트롤의 값을 가져와서 데이터를 씁니다
GetValueSetData: 함수(togName) {
                   var 값 ​​= 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] = 값;//데이터 수집에 추가
             },
//다음과 같은 값: getValue("BasicData")
GetValue: 함수(p) {
                     this.data 반환[p];
             },
//URL 가져오기 또는 설정
GetUrl: 함수(url) {
만약 (url)
This.data.BasicData["url"] = url;
                 그 외
                            return this.data.BasicData["url"];
            }
,
//값을 문자열 객체 데이터로 변환
GetJsonData: 함수 () {
            return $.toJSONString(this.data);
}
}

3. 바인딩된 프런트엔드 데이터 개체를 만듭니다. [백그라운드에서 전달된 값을 읽고 이를 프런트엔드 페이지에 바인딩하는 데 사용됨]

코드 복사 코드는 다음과 같습니다.

var MyDataBinder = {
//데이터를 제어 데이터에 바인딩: data 태그: 태그
바인드: 함수(데이터, 태그) {
         var MJson = $.parseJSON(data);
//표시된 태그만 바인딩
           $("[bindtag='" 태그 "']").each(함수 () {
If (this.localName == "input") {
                            if (MJson[this.id]) //백그라운드에서 값이 전달되는 경우
$(this).attr("value", 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"는 바인딩할 컨트롤의 레이블
입니다. });

백스테이지:

코드 복사 코드는 다음과 같습니다.

공개 무효 ProcessRequest(HttpContext 컨텍스트)
{
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"];//이렇게 하면 첫 페이지에서 id가 inp_2인 컨트롤 값 값을 바로 얻을 수 있습니다
//======================= 프론트에 값 전달==================== ===== =====================
사전 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을 사용하여 프런트엔드 및 백엔드 가치 전송을 구현하는 방법에 대해 명확하게 이해하고 계시나요? 궁금한 점이 있으면 메시지를 남겨주세요