Springmvc 에서 ajax 요청 을 처리 하고 json 데 이 터 를 되 돌려 줍 니 다.

① springmvc 방법 에@Response Body 주 해 를 추가 하면 springmvc 는 데 이 터 를 json 으로 변환 하여 되 돌려 줍 니 다.

@ResponseBody //    json  ,     
  @RequestMapping("/list")
  public List<User> list(User user){
    System.out.println("         :"+user);
    //todo           ,      
    ArrayList<User> users=new ArrayList<>();
    users.add(new User(1,"james",18," "));
    users.add(new User(2,"  ",40," "));
    users.add(new User(3,"  ",46," "));
    return users;
  }
list.jsp 페이지 의 코드 는:

<body>
  <input type="button" id="btn" value="      "/>
  <script src="${pageContext.request.contextPath}/static/js/jquery-3.2.1.min.js"></script>
  <script>
    $(function ($) {
      $("#btn").click(function () {
        $.ajax({
          url:"${pageContext.request.contextPath}/list",
          type:"post",
          data:{"name":"james","age":18},
          dataType:"json",
          success:function (result) {
            alert("    !")
            console.log(result)
          }
        })
      })
    })
  </script>
</body>
② contentType="application/json"일 경우 방법의 매개 변수 앞 에@RequestBody 주 해 를 추가 하여 전 달 된 json 문자열 을 가 져 와 대상 에 봉인 합 니 다.

@ResponseBody //    json  ,     
  @RequestMapping("/list")
  public List<User> list(@RequestBody(required=false) User user){
    System.out.println("         :"+user);
    //todo           ,      
    ArrayList<User> users=new ArrayList<>();
    users.add(new User(1,"james",18," "));
    users.add(new User(2,"  ",40," "));
    users.add(new User(3,"  ",46," "));
    return users;
  }
list.jsp 페이지 의 코드 는:

<body>
  <input type="button" id="btn" value="      "/>
  <script src="${pageContext.request.contextPath}/static/js/jquery-3.2.1.min.js"></script>
  <script>
    $(function ($) {
      $("#btn").click(function () {
        var jsonObj={"name":"james","age":18};
        $.ajax({
          url:"${pageContext.request.contextPath}/list",
          type:"post",
          data:JSON.stringify(jsonObj),//json     json        
          dataType:"json",
          contentType:"application/json",//   json      
          success:function (result) {
            alert("    !")
            console.log(result)
          }
        })
      })
    })
  </script>
</body>
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기