>  기사  >  웹 프론트엔드  >  jQuery를 사용하여 복잡한 json 데이터를 asp.net Mvc에 전달 - ModelBinder_jquery

jQuery를 사용하여 복잡한 json 데이터를 asp.net Mvc에 전달 - ModelBinder_jquery

WBOY
WBOY원래의
2016-05-16 18:27:551676검색

jQuery의 ajax 메소드를 호출할 때 jQuery는 post 또는 get 프로토콜에 따라 매개변수 데이터를 직렬화합니다.

제출된 데이터가 복잡한 json 데이터를 사용하는 경우(예:

{userId:32323, userName) :{firstName:"lee",lastName:"李大mouth"}}

이 경우 jQuery는 키-값 쌍 어셈블리를 사용하여 데이터를 직렬화하므로 서버가 전체 매개변수를 정상적으로 수신할 수 없습니다.

매개변수는 userId=32323&userName=object로 결합됩니다. userName이 가리키는 개체는 "object" 문자열로 직렬화됩니다.


복잡한 개체 개체를 제출하는 방법

먼저 매개변수 직렬화로 jQuery의 문제를 해결하세요.

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

/*문자열로 직렬화된 개체*/
String.toSerialize = function(obj) {
var ransferCharForJavascript = function(s) {
var newStr = s.replace(
/[x26x27x3Cx3Ex0Dx0Ax22x2Cx5Cx00]/g,
function(c) {
ascii = c.charCodeAt(0)
return '\u00' (ascii < 16 ? '0 ' ascii.toString( 16) : ascii.toString(16))
}
);
return newStr;
}
if (obj == null) {
return null
}
else if (obj.constructor == Array) {
var builder = [];
builder.push("[")
for (var index in obj) {
if ( typeof obj[index] == "function") continue;
if (index > 0) builder.push(",")
builder.push(String.toSerialize(obj[ index]));
}
builder.push("]");
return builder.join("")
}
else if (obj.constructor == Object) {
var builder = [];
builder.push("{");
var index = 0;
for (var key in obj) {
if (typeof obj[key ] == "함수 ") 계속;
if (index > 0) builder.push(",");
builder.push(String.format(""{0}":{1}" , key, String. toSerialize(obj[key])));
index ;
}
builder.push("}")
return builder.join(""); else if (obj.constructor == Boolean) {
return obj.toString();
}
else if (obj.constructor == Number) {
return obj.toString(); 🎜>}
else if (obj.constructor == String) {
return String.format('"{0}"', ransferCharForJavascript(obj))
}
else if (obj .constructor == Date) {
return String.format('{"__DataType":"Date","__thisue":{0}}', obj.getTime() - (new Date( 1970, 0, 1 , 0, 0, 0)).getTime());
}
else if (this.toString != undefine) {
return String.toSerialize(obj); }



jQuery 비동기 요청:



코드 복사
코드는 다음과 같습니다. $(function() { /*버튼 클릭 이벤트*/ $("#btn_post_test").click(function() {
var data = [
{ UserId: "11", UserName: { FirstName: "323", LastName: "2323" }, Keys: ["xiaoming", "xiaohong"] },
{ UserId: "22", UserName: { 이름: "323", 성: "2323" }, 키: ["xiaoming", "xiaohong"] },
{ UserId: "33", UserName: { 이름: "323", 성: " 2323" }, 키: ["xiaoming", "xiaohong"] }
];
$.post("Home/Test", { users: String.toSerialize(data) }, function(text) {
alert(String.toSerialize(text));
}, "json");
})
})


데이터를 제출하고 모니터링하려면 브라우저에서 제출된 데이터가 json 객체의 직렬화된 콘텐츠임을 확인할 수 있습니다.



코드 복사
코드는 다음과 같습니다. 다음과 같습니다: POST /Home/Test HTTP/1.1 x-requested-with: XMLHttpRequest Accept-Language: zh-cn
참조자: http://localhost :3149/test.html
수락: application/json, text/javascript, */*
콘텐츠 유형: application/x-www-form-urlencoded
수락-인코딩: gzip, deflate
사용자 에이전트: Mozilla /4.0(호환; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; .NET4 .NET4.0E)
호스트: localhost:3149
콘텐츠 길이: 501
연결: 연결 유지
캐시 제어: 캐시 없음
쿠키: CookieGlobalLoginUserID=16063
users=[{"UserId":"11","Name":{"FirstName":"323","LastName":"2323"},"Keys":["xiaoming ","xiaohong"] },{"UserId":"22","이름":{"FirstName":"323","LastName":"2323"},"Keys":["xiaoming","xiaohong "]},{" UserId":"33","이름":{"FirstName":"323","LastName":"2323"},"Keys":["xiaoming","xiaohong"]}]


둘째, 백그라운드 서버는 매개변수 바인딩을 처리합니다.
코드 복사 코드는 다음과 같습니다.

System.Collections.Generic 사용;
System.Web.Mvc 사용;
Newtonsoft.Json.Linq 사용
WebOS.Controllers 사용
🎜>[ HandleError]
공용 클래스 HomeController : 컨트롤러
{
///
/// 테스트 방법
///
// < ;param name="users">사용자 데이터
/// 제출된 사용자 배열 공개 ActionResult Test([ModelBinder(typeof(JsonBinder ;))] 사용자 나열)
{
return Json(users, JsonRequestBehavior.AllowGet)
}
}
/// / 객체 엔터티
///

[JsonObject]
공용 클래스 사용자
{
[JsonProperty("UserName")]
공용 사용자 이름 이름 { get; set; }
[JsonProperty("UserId")]
공개 문자열 UserId { get; set }
[JsonProperty("Keys")]
공개 목록 ; }
}
///
/// 객체 엔터티
///

[JsonObject]
공개 클래스 UserName
{
[JsonProperty("FirstName")]
공개 문자열 FirstName { get; set }
[JsonProperty("LastName")]
공개 문자열 LastName }
}
///
/// Json 데이터 바인딩 클래스
///
/// < ; /typeparam>
공용 클래스 JsonBinder : IModelBinder
{
공용 객체 BindModel(ControllerContext ControllerContext, ModelBindingContext BindingContext)
{
//요청에서 제출된 매개변수 데이터 가져오기
var json = ControllerContext.HttpContext.Request.Form[bindContext.ModelName] as string;
//제출 매개변수는 객체입니다
if (json.StartsWith("{") && json.EndsWith("} " ))
{
JObject jsonBody = JObject.Parse(json);
JsonSerializer js = new JsonSerializer();
object obj = js.Deserialize(jsonBody.CreateReader(), typeof(T) ) );
return obj;
}
//제출 매개변수는 배열입니다
if (json.StartsWith("[") && json.EndsWith("]"))
{
IList list = new List();
JArray jsonRsp = JArray.Parse(json)
if (jsonRsp != null)
{
for ( int i = 0; i < jsonRsp.Count; i )
{
JsonSerializer js = new JsonSerializer()
object obj = js.Deserialize(jsonRsp[i].CreateReader(), T)) ;
list.Add((T)obj);
}
}
return list;
}
return null; 🎜>}


프런트 엔드는 백그라운드에서 반환된 데이터를 가져오고 결과는 사용자가 제출한 데이터입니다.


백그라운드 json 역직렬화는 Newtonsoft를 사용합니다. .Json 구성 요소에 대한 자세한 내용은
http://james.newtonking.com/
을 참조하세요.
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.