jQuery Ajax 가 서버 에 배열 매개 변수 값 을 전달 하 는 인 스 턴 스 코드

MVC 를 사용 할 때 서버 측 에 POST 요청 을 보 낼 때 매개 변수 값 으로 배열 을 전달 해 야 할 때 도 있 습 니 다.
다음은 예 를 들 어 설명 하 겠 습 니 다.먼저 Action 을 보 겠 습 니 다.

[HttpPost]
public ActionResult Test(List<string> model)
{
 return Json(null, JsonRequestBehavior.AllowGet);
}
방식 1.폼 요 소 를 구성 한 다음 serialize()방법 으로 구조 적 매개 변수 문자열 을 얻 습 니 다.

@{
 Layout = null;
}
<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="width=device-width" />
 <title>Test</title>
</head>
<body>
 <div>
  <input type="button" id="btnAjax" value="    " />
 </div>
 <script src="~/Scripts/jquery-1.10.2.min.js"></script>
 <script type="text/javascript">
  var tmp = '<input type="hidden" name="model" value="1" /><input type="hidden" name="model" value="2" />';
  $(function () {
   $("#btnAjax").click(function () {
    $.ajax({
     url: '@Url.Action("Test")',
     type: 'POST',
     data: $(tmp).serialize(),
     success: function (json) {
      console.log(json);
     }
    });
   });
  });
 </script>
</body>
</html>
디 버 깅 모드 감시 파 라 메 터 는 단 추 를 누 르 면 다음 과 같이 감 시 됩 니 다.


방식 2:JavaScript 대상 을 매개 변수 전송 값 으로 사용 합 니 다.매개 변수 이름 은 Action 방법 에 대응 하 는 매개 변수 이름 이 고 매개 변수 값 은 JavaScript 배열 입 니 다.

@{
 Layout = null;
}
<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="width=device-width" />
 <title>Test</title>
</head>
<body>
 <div>
  <input type="button" id="btnAjax" value="    " />
 </div>
 <script src="~/Scripts/jquery-1.10.2.min.js"></script>
 <script type="text/javascript">
  //var tmp = '<input type="hidden" name="model" value="1" /><input type="hidden" name="model" value="2" />';
  var array = ["abc","123"];
  $(function () {
   $("#btnAjax").click(function () {
    $.ajax({
     url: '@Url.Action("Test")',
     type: 'POST',
     data: {
      model:array
     },
     success: function (json) {
      console.log(json);
     }
    });
   });
  });
 </script>
</body>
</html>


방식 3.JSon 을 매개 변수 로 요청 합 니 다.이때 Ajax 는 Content-Type 을 application/json 이 라 고 밝 혀 야 합 니 다.

@{
 Layout = null;
}
<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="width=device-width" />
 <title>Test</title>
</head>
<body>
 <div>
  <input type="button" id="btnAjax" value="    " />
 </div>
 <script src="~/Scripts/jquery-1.10.2.min.js"></script>
 <script type="text/javascript">
  //var tmp = '<input type="hidden" name="model" value="1" /><input type="hidden" name="model" value="2" />';
  //var array = ["abc","123"];
  $(function () {
   $("#btnAjax").click(function () {
    $.ajax({
     url: '@Url.Action("Test")',
     type: 'POST',
     contentType:'application/json;charset=utf-8',
     data: JSON.stringify({
      model:["hello","welcome"]
     }),
     success: function (json) {
      console.log(json);
     }
    });
   });
  });
 </script>
</body>
</html>


위의 예 는 ASP.NET MVC 5 를 사용 합 니 다.
총결산
위 에서 말 한 것 은 소 편 이 여러분 에 게 소개 한 jQuery Ajax 가 서버 에 배열 매개 변수 값 을 전달 하 는 인 스 턴 스 코드 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.소 편 은 제때에 집에 돌아 갈 것 입 니 다!

좋은 웹페이지 즐겨찾기