[20-10-09] MINI 작업 중
- Computer/기타
- 2020. 10. 9.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="org.json.simple.JSONObject"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>영화 선택하기</title>
<link
href="//maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"
rel="stylesheet">
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript"
src="//maxcdn.bootstrapcdn.com/bootstrap/latest/js/bootstrap.min.js"></script>
<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js"></script>
<style>
label {
display: block;
}
</style>
</head>
<body>
<div>
<!-- 한 블럭 -->
<div class="btn-group-vertical btn-group btn-group-toggle"
data-toggle="buttons" id="first"></div>
<!-- 두번째 블럭 -->
<div class="btn-group-vertical btn-group btn-group-toggle"
data-toggle="buttons" id="second"></div>
<!-- 세번째 블럭 -->
<div class="btn-group-vertical btn-group btn-group-toggle"
data-toggle="buttons" id="third"></div>
<!-- 네번째 블럭 -->
<div class="btn-group-vertical btn-group btn-group-toggle"
data-toggle="buttons" id="fourth"></div>
</div>
<!-- 스크립트 영역 -->
<script type="text/javascript">
$(function() {
start();
});
function start() {
$
.ajax({
url : "movieList.pm",
dataType : 'json',
success : function(data) {
var first = document.getElementById('first');
var str = "";
for (var i = 0; i < data.length; i++) {
str += "<label class='btn btn-secondary' active>"
+ "<input type='radio' name='options' id='option1'"
+ " onchange=second('"
+ data[i].name
+ "')>" + data[i].name + "</label>";
}
first.innerHTML = str;
},
});
}
//지역 구분하기
function second(movie) {
$
.ajax({
url : "movieaddress1.pm",
data : {
movie : movie
},
dataType : 'json',
success : function(data) {
var second = document.getElementById('second');
var str = "";
for (var i = 0; i < data.length; i++) {
str += "<label class='btn btn-secondary' active>"
+ "<input type='radio' name='options' id='option1'"
+ " onchange=third('"
+ data[i].name
+ "','"
+ data[i].movie
+ "')>"
+ data[i].name
+ "("
+ data[i].count
+ ")" + "</label>";
}
second.innerHTML = str;
},
});
}
function third(address1, movie) {
$
.ajax({
url : "movieaddress2.pm",
data : {
address1 : address1,
movie : movie
},
dataType : 'json',
success : function(data) {
var third = document.getElementById('third');
console.log(data);
var str = "";
for (var i = 0; i < data.length; i++) {
alert(data[i].name);
str += "<label class='btn btn-secondary' active>"
+ "<input type='radio' name='options' id='option1' onchange=fourth('"
+ data[i].theater
+ "','"
+ data[i].movie
+ "')>"
+ data[i].theater + "</label>";
}
third.innerHTML = str;
},
});
}
function fourth(name, movie) {
alert(name, movie);
$
.ajax({
url : "movieDate.pm",
data : {
thname : name,
movie : movie
},
dataType : 'json',
success : function(data) {
var fourth = document.getElementById('fourth');
var str = "";
for (var i = 0; i < data.length; i++) {
str += "<label class='btn btn-secondary' active>"
+ "<input type='radio' name='options' id='option1'"
+ " onchange=fifth('"
+ data[i].Date
+ "','"
+ data[i].name
+ "','"
+ data[i].movie
+ "')>"
+ data[i].view
+ "</label>";
}
fourth.innerHTML = str;
},
});
}
function fifth(date, name, movie) {
alert("안돼");
}
</script>
</body>
</html>
오늘은 AJAX와 JSON을 이용해서 DB 연동 작업 하고 있습니다.
영화관 사이트에서 영화를 누를 때마다 극장과 극장이름, 날짜의 변동을 에이젝스를 통해 나타내려고 합니다.
현재는 이렇게, 제목을 누를때마다 해당 DB의 결과를 출력하게 만들고 있습니다.
반응형
'Computer > 기타' 카테고리의 다른 글
| <html> 라벨 (0) | 2021.04.13 |
|---|---|
| [html] 링크 만들기 (0) | 2021.04.13 |
| [html] 링크 만들기 (0) | 2021.04.13 |
| [유튜브] 빅데이터란 무엇인가? (0) | 2020.10.20 |
| [MINI-PROJECT] DB 설계하기 (0) | 2020.09.20 |