SpringMVC+Ajax+html 문자열 인 스 턴 스 코드

2468 단어 ajaxhtml
이 걸 왜 쓰 지?지금 홈 페이지 에 있 으 니까.단순 한 동기 전달 데이터 가 매우 줄 어 들 었 다.대부분 Ajax 비동기 로 데 이 터 를 전달 합 니 다.따라서 여기 서 SpringMVC+Ajax 로 간단 한 예 를 들 어 문자열 을 맞 추 는 것 을 보조 합 니 다.모두 에 게 도움 이 되 기 를 바 랍 니 다.
이번 사례 의 설정 은 여전히 이전 편SpringMVC 의 간단 한 첨삭 검사(SSM 통합)을 바탕 으로 Jackson 의 jar 가방 을 보조 적 으로 설정 합 니 다.
서버 쪽

  @RequestMapping("/ajaxlist")
  @ResponseBody//(springmvc Jackson  ，  json   )
  public List<User> getUserList()
  {
    List<User> list =userService.findAll();
    return list;
  }
전단 사용

 <body>
    <button id="testButton">    </button> 
    <div id="content"></div> 
 </body>
Ajax 요청 및 문자열 맞 추기

<script type="text/javascript">
  $(function() {
    $("#testButton").click(function()
    {
      $.ajax(
      {
      url:"${pageContext.request.contextPath }/user/ajaxlist",
      type:'GET',
      dataType:'json',
      success:function(data)
      {
      //     
        var html = "<table><tr><td>   </td><td>  </td><td>  </td><td>    </td></tr>";
        for(var i=0;i<data.length;i++)
        {
          html=html+"<tr>"+"<td>"+data[i].username+"</td>"+"<td>"+data[i].password+"</td>"+
          "<td>"+data[i].nickname+"</td>"+"<td>"+data[i].email+"</td>"+"</tr>";
        }
        html = html+"</table>";
        $("#content").append(html);
      }
    });
    });

  });
</script>
사실 쓰 는 과정 에서 저 는 firebug 로 디 버 깅 을 했 을 때 jQuery 의 파일 을 가 져 올 수 없다 는 것 을 알 게 되 었 습 니 다.저 는 경로 문제 라 고 생각 했 습 니 다.경 로 를 확인 한 후에 제 정적 자원 맵 이 설정 되 지 않 았 다 는 것 을 알 게 되 었 습 니 다.정적 자원 맵 을 설정 하면 OK 입 니 다.
결과 보이 기

물론 예 쁘 지 는 않 지만 예 쁘 게 보 여야 한다 면.Bootstrap 이나 다른 프레임 워 크 를 도입 하여 스타일 을 미화 할 수 있 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
ajax 3 레벨 연동 드 롭 다운 메뉴 효과
Ajax 데이터 삭제 및 데이터 보기 동작

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage