영보의 SystemOut.log

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

Spring

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

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

 개념

 

 # ajax

  - 모든 제이쿼리 Ajax 메소드의 핵심이 되는 메소드입니다.

  - $.ajax() 메소드는 HTTP 요청을 만드는 강력하고도 직관적인 방법

 

 

 

# $.ajax() 메소드에서 사용가능한 대표적인 옵션

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
$.ajax({
 
    url: "/examples/media/request_ajax.php", // 클라이언트가 요청을 보낼 서버의 URL 주소
 
    data: { name: "홍길동" },                // HTTP 요청과 함께 서버로 보낼 데이터
 
    type: "GET",                             // HTTP 요청 방식(GET, POST)
 
    dataType: "json"                         // 서버에서 보내줄 데이터의 타입
 
})
 
// HTTP 요청이 성공하면 요청한 데이터가 done() 메소드로 전달됨.
 
.done(function(json) {
 
    $("<h1>").text(json.title).appendTo("body");
 
    $("<div class=\"content\">").html(json.html).appendTo("body");
 
})
 
// HTTP 요청이 실패하면 오류와 상태에 관한 정보가 fail() 메소드로 전달됨.
 
.fail(function(xhr, status, errorThrown) {
 
    $("#text").html("오류가 발생했습니다.<br>")
 
    .append("오류명: " + errorThrown + "<br>")
 
    .append("상태: " + status);
 
})
 
// HTTP 요청이 성공하거나 실패하는 것에 상관없이 언제나 always() 메소드가 실행됨.
 
.always(function(xhr, status) {
 
    $("#text").html("요청이 완료되었습니다!");
 
});
 cs

 

 

 

# $.ajax() 메소드의 동작을 보여주는 간단한 예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(function() {
    $("#requestBtn").on("click", function() {
        $.ajax("/examples/media/request_ajax.php")
        .done(function() {
            alert("요청 성공");
        })
 
        .fail(function() {
            alert("요청 실패");
        })
 
        .always(function() {
            alert("요청 완료");
        });
    });
});
 cs

 

www.tcpschool.com/ajax/ajax_jquery_ajax 

 

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

   - 오늘 코드에서는 ajax가 중점적으로 나오는데, ajax는 구조와 프로세스만 이해하면 제 코드 이해하는 데에 큰 문제 없을거라 생각하여 링크 첨부합니다.

 

 

 

 

 예제

 

 

# json 파일 다운받기

drive.google.com/file/d/19n1Q2c1dTLHOpsDfyWBcyTCevWSphtEH/view?usp=sharing

 

json.zip

 

drive.google.com

  - 제 구글 드라이브 링크 타고 들어가셔서 받으시면 됩니다.

 

 

# json파일 환경설정

 - 다 오류가 뜨지만ㅎㅎ 정상적으로 실행되는겁니다

 - 경로 : [src] - [main] - [webapp] - [movie폴더 생성]

 

 

 

# movie.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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<%@ 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;
   width:900px;
}
</style>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    //$( "#dialog" ).dialog();
    $( "#tabs" ).tabs();
    $.getJSON("movie.json",function(data){
        $.each(data["datas"],function(index,value){
            $('#mp').append(
                "<td><img src="+value.poster+" width=100 height=150 onclick=detail("+value.mno+")></td>"
            );
        })
    });
    
    $.getJSON("rank.json",function(data){
        $.each(data["datas"],function(index,value){
            $('#table1').append(
                "<tr><td>"+value.rank+"</td><td>"+value.title+"</td></tr>"
            );
        })
    });
    $.getJSON("box.json",function(data){
        $.each(data["datas"],function(index,value){
            $('#table2').append(
                "<tr><td>"+value.rank+"</td><td>"+value.title+"</td></tr>"
            );
        })
    });
    $.getJSON("reserve.json",function(data){
        $.each(data["datas"],function(index,value){
            $('#table3').append(
                "<tr><td>"+value.rank+"</td><td>"+value.title+"</td></tr>"
            );
        })
    });
  });
  
  function detail(mno)
  {
      $.getJSON("movie.json",function(data){
            $.each(data["datas"],function(index,value){
                if(value.mno==mno)
                {
                
                    $('#poster').attr("src",value.poster);
                    $('#title').text(value.title);
                    $('#director').text(value.director);
                    $('#actor').text(value.actor);
                    $('#genre').text(value.genre);
                    $('#grade').text(value.grade);
                    $('#story').text(value.story);
                    
                    $("#dialog").dialog({ 
                         autoOpen: true, 
                         width: 450, 
                         height:550,
                         modal: true
                    });
                    return true;
                }
            })
        });
  }
  </script>
  
</head>
<body>
  <div class="container">
    <div class="row">
      <h3 class="text-center">영화</h3>
      <table class="table">
        <tr id="mp"></tr>
      </table>
    </div>
    <div class="col-sm-6">
      <div id="tabs">
          <ul>
            <li><a href="#tabs-1">영화순위</a></li>
            <li><a href="#tabs-2">박스오피스</a></li>
            <li><a href="#tabs-3">예매율</a></li>
          </ul>
          <div id="tabs-1">
            <table class="table" id="table1">
              
            </table>
          </div>
          <div id="tabs-2">
            <table class="table" id="table2">
            
            </table>
          </div>
          <div id="tabs-3">
            <table class="table" id="table3">
            
            </table>
          </div>
        </div>
    </div>
    <div class="col-sm-6">
      <div id="dialog" title="영화 상세" style="display:none">
        <table class="table">
          <tr>
            <td width="30%" class="text-center" rowspan="5">
              <img src="" width=100% id="poster">
            </td>
            <td colspan="2" id="title"></td>
          </tr>
          <tr>
            <td width=20% class="text-right">감독</td>
            <td width=50% class="text-left" id="director"></td>
          </tr>
          <tr>
            <td width=20% class="text-right">출연</td>
            <td width=50% class="text-left" id="actor"></td>
          </tr>
          <tr>
            <td width=20% class="text-right">장르</td>
            <td width=50% class="text-left" id="genre"></td>
          </tr>
          <tr>
            <td width=20% class="text-right">등급</td>
            <td width=50% class="text-left" id="grade"></td>
          </tr>
          <tr>
            <td colspan="3" valign="top" id="story"></td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</body>
</html>
 cs

   -  qh5944.tistory.com/102

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

  - 위 코드는 JSON file의 도움을 받아 실행가능한 코드로, 위링크에 첨부된 JSON파일을 꼭 다운받아야합니다.

 

 

 

 

 

 

 출력 화면

 

 - <ul> 태그로 [영화순위/박스오피스/예매율]을 각각 출력해서 클릭하여 열람 가능합니다.

 

 

  - 코코 누르면 창이 뜹니다!

  - jqueryui.com/dialog/  

     ↑ 위 링크에서 코드 참고하였습니다

반응형
저작자표시

'Spring' 카테고리의 다른 글

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