SpringMVC+Ajax+splicing html 문자열 예제 코드-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

SpringMVC+Ajax+splicing html 문자열 예제 코드

亚连

May 22, 2018 pm 03:57 PM

html 끈

이 글에서는 주로 SpringMVC+Ajax+splicing 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:&#39;GET&#39;,
      dataType:&#39;json&#39;,
      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>

로그인 후 복사

을 사용합니다.

사실 집필 과정에서 파이어버그를 사용하고 있었는데 디버깅을 하다가 jQuery 파일을 얻을 수 없다는 걸 발견하고 항상 경로 문제인 줄 알았는데, 경로가 올바른지 확인한 후 정적 리소스 매핑이 구성되지 않은 것을 발견했습니다. 정적 리소스 매핑을 구성한 후에는 괜찮습니다.

전면 디스플레이 결과