SpringMVC+Ajax가 HTML 문자열 접합을 구현하는 방법-JS 튜토리얼-php.cn

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

php中世界最好的语言

풀어 주다： 2018-04-02 11:10:53

원래의

1690명이 탐색했습니다.

이번에는 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 파일을 가져올 수 없습니다. 예, 항상 경로 문제인 줄 알았습니다. 경로가 올바른지 확인한 후 정적 리소스 매핑이 구성되지 않은 것을 발견했습니다. 정적 리소스 매핑을 구성한 후에는 괜찮습니다.

전면 디스플레이 결과