jQuery 는 ajax 를 사용 하여 json 대상 을 서버 및 contentType 에 전달 하 는 용법 예제 입 니 다.

본 고의 실례 는 jQuery 가 aax 를 사용 하여 json 대상 을 서버 와 contentType 에 전달 하 는 용법 을 설명 한다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
0.일반적인 상황 에서 키 값 이 맞 는 방식 으로 파 라 메 터 를 서버 에 전달 합 니 다.
0.1 클 라 이언 트 코드:

$.ajax({
 url: 'TestHandler.ashx',
 type: 'post',
 data: {
  name: "admin",
  age: 10
 },
 dataType: 'text',
 success: function (data) {
  alert(data);
 }
})

0.2 서버 코드:

public void ProcessRequest(HttpContext context)
{
 string bodyText = string.Empty;
 using (var bodyReader = new System.IO.StreamReader(context.Request.InputStream))
 {
  bodyText = bodyReader.ReadToEnd();
 }

 string name= context.Request["name"].ToString();// "admin"
 string age = context.Request["age"].ToString();// "10"

 context.Response.ContentType = "text/plain";
 context.Response.Write(bodyText);// "name=admin&age=10"
}

0.3 브 라 우 저의 네트워크 에서 이번 요청 보기:

위의 캡 처 에서 알 수 있 듯 이 post 요청 은 formdata 의 키 값 을 기호'&'로 연결 하여 하나의 문자열 로 연결 하여 서버 에 전달 하 는 것 입 니 다.서버 는 key 를 통 해 값 을 얻 거나 request 의 body 에서 전체 문자열 을 읽 을 수 있 습 니 다.
1.ajax 는 복잡 한 json 대상 을 서버 로 전달 합 니 다.
1.1 방법 1:formdata 를 통 해 값 을 전달 하고 서버 는 key 를 통 해 값 을 얻 습 니 다.
클 라 이언 트 코드:

var user1 = {
 username: 'admin',
 age: 10
};
var user2 = {
 username: 'test',
 age: 11
};
var userArr = [];
userArr.push(user1);
userArr.push(user2);

$.ajax({
 url: 'TestHandler.ashx',
 type: 'post',
 //contentType: 'application/json',
 //contentType:"application/x-www-form-urlencoded; charset=UTF-8",
 data: {
  Users: JSON.stringify(userArr)
 },
 dataType: 'text',
 success: function (data) {
  alert(data);
 }
})

서버 코드:

public void ProcessRequest(HttpContext context)
{
 string contentType= context.Request.ContentType;// "application/x-www-form-urlencoded; charset=UTF-8"

 string users = context.Request["Users"].ToString();
 dynamic obj = JsonConvert.DeserializeObject(users);

 context.Response.ContentType = "text/plain";
 context.Response.Write(obj[0].username);// "admin"
}

1.2 방법 2:formdata 방식 으로 값 을 전달 하고 서버 에서 Request.InputStream 을 읽 습 니 다.
전단 코드:

var user1 = { username: 'admin', age: 10 };
var user2 = { username: 'test', age: 11 };
var userArr = [];
userArr.push(user1);
userArr.push(user2);

$.ajax({
 url: 'TestHandler.ashx',
 type: 'post',
 //contentType: 'application/json',
 //contentType:"application/x-www-form-urlencoded; charset=UTF-8",
 data: JSON.stringify(userArr),
 dataType: 'text',
 success: function (data) {
  alert(data);
 }
})

서버 코드:

public void ProcessRequest(HttpContext context)
{
 string contentType= context.Request.ContentType;//"application/x-www-form-urlencoded; charset=UTF-8"
 string bodyText = string.Empty;
 using (var bodyReader = new System.IO.StreamReader(context.Request.InputStream))
 {
  bodyText = bodyReader.ReadToEnd();// [{"username":"admin","age":10},{"username":"test","age":11}]
 }

 dynamic obj = JsonConvert.DeserializeObject(bodyText);

 context.Response.ContentType = "text/plain";
 context.Response.Write(obj[0].username);// "admin"
}

브 라 우 저 를 통 해 이번 요청 보기:

그림 에서 보 듯 이 content-type 은 application/x-www-form-urlencoded 이기 때문에 브 라 우 저 는 전 송 된 데 이 터 를 key-value 형식 으로 해석 하려 고 시도 하지만 실제 ajax 의 data 에 json 문자열 을 설정 하여 key-value 형식 으로 해석 할 수 없 기 때문에 서비스 에서 key 를 통 해 값 을 얻 을 수 없습니다.Request.InputStream 에서 만 가 져 올 수 있 습 니 다.
Request.InputStream 을 통 해 원 하 는 데 이 터 를 얻 을 수 있 지만 asp.net 뮤 직 비디오 프로젝트 에 서 는 주의 할 점 이 있 습 니 다.다음은 뮤 직 비디오 프로젝트 에 가서 시도 해 보 겠 습 니 다.
2.content-type 이 asp.net 뮤 직 비디오 프로젝트 에 대한 중요성
주:예시 에서 서버 는 asp.net Apicontroller 를 사용 합 니 다.일반적인 mvc controller 를 사용 하면 다른 해결 방안 이 있 습 니 다.
2.1 클 라 이언 트 코드:

var user1 = { username: 'admin', age: 10 };
var user2 = { username: 'test', age: 11 };
var userArr = [];
userArr.push(user1);
userArr.push(user2);

$.ajax({
 url: 'Test/PostUsers',
 type: 'post',
 data: JSON.stringify(userArr),
 dataType: 'text',
 success: function (data) {
  alert(data);
 }
})

2.2 서버 코드:

public class TestController : ApiController
{
 public string PostUsers( List<User> Users)
 {
  return Users.Count.ToString();// 0
 }
}
public class User
{
 public string username { get; set; }
 public int age { get; set; }

}

위의 코드 에서 클 라 이언 트 가 보 낸 것 은 json 문자열 입 니 다.서버 의 변수 Users 는 전단 에서 보 내 온 json 정 보 를 얻 을 수 없습니다.
그 전단 은 어떻게 데 이 터 를 보 내 고 백 엔 드 는 이렇게 데 이 터 를 얻 을 수 있 습 니까?
2.3 해결 방안:(설정contentType

var user1 = { username: 'admin', age: 10 };
var user2 = { username: 'test', age: 11 };
var userArr = [];
userArr.push(user1);
userArr.push(user2);

$.ajax({
 url: 'Test/PostUsers',
 type: 'post',
 contentType: 'application/json',
 //contentType:"application/x-www-form-urlencoded; charset=UTF-8",
 data: JSON.stringify(userArr),
 //dataType: 'text',
 success: function (data) {
  alert(data);// 2
 }
})

ajax 에contentType설정 을 추가 한 것 을 알 수 있 습 니 다.
jq 의 ajax 에서contentType서버 에 보 내 는 형식 을 설정 합 니 다.dataType서버 데 이 터 를 받 은 형식 을 설정 합 니 다.
http 요청 에서 get 과 post 가 가장 많이 사 용 됩 니 다.jquery 의 ajax 에서contentType는 기본 값 입 니 다.application/x-www-form-urlencoded이러한 형식의 특징 은 name/value 가 한 그룹 이 되 고 각 그룹 간 에&연결 을 사용 하 며 name 과 value 는=연결 을 사용 하 는 것 입 니 다.예 를 들 어 www.wh.baidu.com/q?key=fdsa&lang=zh 는 get 이 고 post 요청 은 요청 체 를 사용 합 니 다.매개 변 수 는 url 에 있 지 않 습 니 다.요청 체 에서 의 매개 변수 표현 형식 도 key=fdsa&lang=zh 형식 입 니 다.
키 값 은 이러한 조직 에 대해 일반적인 상황 에서 아무런 문제 가 없 지만 복잡 한 json 을 전달 하려 면contentType을application/json로 설정 할 수 있 습 니 다.우 리 는 ajax 에서 복잡 한 JSON 데 이 터 를 전달 할 때 JSON.stringify 로 직렬 화 한 다음 에 보 내 고 서버 에서 받 은 후에 JSON.parse 로 복원 하면 복잡 한 대상 을 처리 할 수 있 습 니 다.
2.4 기타 해결 방안:(서버 코드 수정)
방법 1:Request.content 의 값 을 직접 읽 고 역 직렬 화 합 니 다.

public class TestController : ApiController
{
 //[Route("ddd")]
 //[HttpPost]
 public string PostUsers( )
 {
  string str = Request.Content.ReadAsStringAsync().Result;//[{"username":"admin","age":10},{"username":"test","age":11}]
  var users = JsonConvert.DeserializeObject<List<User>>(str);
  return users.Count.ToString();
 }
}
public class User
{
 public string username { get; set; }
 public int age { get; set; }
}

방법 2:서버 에 서 는 일반적인 mvc 컨트롤 러 를 사용 하고 전단 에 key-value 값 을 사용 합 니 다.

var user1 = { username: 'admin', age: 10 };
var user2 = { username: 'test', age: 11 };
var userArr = [];
userArr.push(user1);
userArr.push(user2);

$.ajax({
 url: 'Test1/PostUsers',
 type: 'post',
 data: { Users: userArr },
 success: function (data) {
  alert(data); // 2
 }
})

public class Test1Controller : Controller
{
 public string PostUsers( List<User> Users)
 {
  return Content(Users.Count.ToString());// 2
 }
}
public class User
{
 public string username { get; set; }
 public int age { get; set; }

}

브 라 우 저 를 통 해 이 요청 보기:

방법 3:서버 에 서 는 일반적인 뮤 직 비디오 컨트롤 러 를 사용 하고 전단 에 서 는 key-value 전송 값 을 사용 하 며 value 값 은 json 화 해 야 합 니 다.

var user1 = { username: 'admin', age: 10 };
var user2 = { username: 'test', age: 11 };
var userArr = [];
userArr.push(user1);
userArr.push(user2);

$.ajax({
 url: 'Test1/PostUsers',
 type: 'post',
 data: { Users:JSON.stringify(userArr) },
 success: function (data) {
  alert(data); // 2
 }
})

public class Test1Controller : Controller
{
 public ActionResult PostUsers()
 {
  string str = Request["Users"].ToString();
  var us = JsonConvert.DeserializeObject<List<User>>(str);
  return Content(us.Count.ToString());// 2
 }
}

더 많은 jQuery 관련 내용 은 본 사이트 의 주 제 를 볼 수 있 습 니 다.jquery 에서 Ajax 용법 총화,jQuery 확장 기술 총화,jQuery 상용 플러그 인 및 용법 총화,jQuery 흔 한 클래식 필터 모음과jquery 선택 기 용법 총화
본 고 에서 말 한 것 이 여러분 의 jQuery 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.