영보의 SystemOut.log

[Spring] ajax 사용하여 영화 출력 게시판 만들기 - (2) 본문

Spring

[Spring] ajax 사용하여 영화 출력 게시판 만들기 - (2)

영보로그 2020. 11. 14. 02:46
반응형

 예제

qh5944.tistory.com/103

 

[Spring] JSON/ajax 사용하여 영화 출력 게시판 만들기 - (1)

 개념  # ajax - 모든 제이쿼리 Ajax 메소드의 핵심이 되는 메소드입니다. - $.ajax() 메소드는 HTTP 요청을 만드는 강력하고도 직관적인 방법 # $.ajax() 메소드에서 사용가능한 대표적인 옵션 1 2 3 4 5 6 7

qh5944.tistory.com

qh5944.tistory.com/102

 

[Spring] MyBatis와 연동하여 음악 게시판 만들기

 개념 현재 프로젝트의 MVC 처리 순서 입니다.  예제 # Oracle에서 기존에 만들어놓은 genie_music 테이블에 hit 컬럼을 추가 1 2 -- 댓글 => 댓글 추가시마다 => hit 증가 ALTER TABLE genie_music ..

qh5944.tistory.com

↑ 앞의 포스팅에서 사용했던 pom.xml / MusicController.java / MusicRestController.java 코드를 불러와서 공통으로 사용해 주시면 됩니다.

또한 ajax 참고해주세요.

 

 

 

 

# move2 / main.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style type="text/css">
.row {
   margin: 0px auto;
}
td{
  font-size: 8pt;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function(){
    $.ajax({
        type:'POST',
        url:'movie_data.do',
        success:function(result)
        {
            let json=JSON.parse(result);
            let res="";
            for(let i=0;i<json.length;i++)
            {
                 res+="<tr>"
                  +"<td>"
                  +"<img src=http://www.kobis.or.kr"+json[i].thumbUrl+" width=30 height=30>"
                  +"</td>"
                  +"<td>"+json[i].movieNm+"</td>"
                  +"<td>"+json[i].director+"</td>"
                  +"<td>"+json[i].genre+"</td>"
                  +"<td>"+json[i].watchGradeNm+"</td></tr>";
            }
            $('#movie_list').html(res);
        }
      });
     
    $('span').click(function(){
        let no=$(this).attr("value");
        $.ajax({
            type:'POST',
            url:'movie_data.do',
            data:{"no":no},
            success:function(result)
            {
                let json=JSON.parse(result);
                let res="";
                for(let i=0;i<json.length;i++)
                {
                     res+="<tr>"
                      +"<td>"
                      +"<img src=http://www.kobis.or.kr"+json[i].thumbUrl+" width=30 height=30>"
                      +"</td>"
                      +"<td>"+json[i].movieNm+"</td>"
                      +"<td>"+json[i].director+"</td>"
                      +"<td>"+json[i].genre+"</td>"
                      +"<td>"+json[i].watchGradeNm+"</td></tr>";
                }
                $('#movie_list').html(res);
            }
          });
    });
})
</script>
</head>
<%--
   thumbUrl
   watchGradeNm
 --%>
<body>
   <div style="height: 30px"></div>
   <div class="container-fluid">
     <div class="row">
       <div class="text-center">
         <span class="btn btn-sm btn-primary" value="1">박스오피스</span>
         <span class="btn btn-sm btn-success" value="2">실시간 예매율</span>
         <span class="btn btn-sm btn-danger" value="3">좌석 점유율</span>
         <span class="btn btn-sm btn-warning" value="4">온라인 이용순위</span>
       </div>
     </div>
     <div class="row">
       <div class="col-sm-5">
       
       </div>
       <div class="col-sm-7">
         <table class="table table-striped">
           <thead>
             <tr>
              <th class="text-center"></th>
              <th class="text-center">영화명</th>
              <th class="text-center">감독</th>
              <th class="text-center">장르</th>
              <th class="text-center">등급</th>
             </tr>
           </thead>
           <tbody id="movie_list">
           </tbody>
         </table>
       </div>
     </div>
   </div>
</body>
</html>
 cs

  - 앞 포스팅 코드와 다른 점은, JSON을 사용하지 않고 코드를 짠 것입니다.

 

 

 출력 화면

 

 

출력 화면이다.

위의 버튼을 누르면 화면이 바뀌는 걸 볼 수 있다.

반응형
저작자표시

'Spring' 카테고리의 다른 글

[Spring] Spring Tiles(스프링 타일즈) 활용 - 영화 리스트 페이지 출력하기  (0) 2020.11.16
[Spring] Spring Tiles (스프링 타일즈) 연결하고 사용해보기  (0) 2020.11.16
[Spring] JSON/ajax 사용하여 영화 출력 게시판 만들기 - (1)  (0) 2020.11.14
[Spring] MyBatis와 연동하여 음악 게시판 만들기  (0) 2020.11.14
[Spring] Spring MVC 구조 자유게시판 만들기 - (3)  (0) 2020.11.10
'Spring' Related Articles more