> 웹 프론트엔드 > JS 튜토리얼 > SpringMVC+Ajax가 HTML 문자열 접합을 구현하는 방법

SpringMVC+Ajax가 HTML 문자열 접합을 구현하는 방법

php中世界最好的语言
풀어 주다: 2018-04-02 11:10:53
원래의
1711명이 탐색했습니다.

이번에는 SpringMVC+Ajax를 사용하여 html문자열을 연결하는 방법과 SpringMVC+Ajax에서 html 문자열을 연결하는 데 사용할 주의사항이 무엇인지 보여드리겠습니다. 다음은 실제 사례입니다. 살펴보겠습니다.

이 글을 쓰는 이유는 무엇인가요? 현재 웹 페이지에 있기 때문입니다. 단순히 데이터를 동기식으로 전달하는 일은 매우 드물어졌습니다. 대부분은 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> 
    <p id="content"></p> 
 </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 파일을 가져올 수 없습니다. 예, 항상 경로 문제인 줄 알았습니다. 경로가 올바른지 확인한 후 정적 리소스 매핑이 구성되지 않은 것을 발견했습니다. 정적 리소스 매핑을 구성한 후에는 괜찮습니다.

전면 디스플레이 결과

물론 여기 디스플레이는 너무 아름답지는 않습니다. 더 아름다워야 한다면 말이죠. Bootstrap 또는 기타 프레임워크를 도입하여 스타일을 아름답게 만들 수 있습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

그림 및 텍스트에 대한 ajax 페이징 쿼리에 대한 자세한 설명

프로젝트에서 ajax 요청을 사용하는 방법

위 내용은 SpringMVC+Ajax가 HTML 문자열 접합을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿