자바스크립트에 마이바티스 넣어서 활용하기 질문
조회수 446회
<div class="container">
<h3>차종</h3>
<select id="carmodel" name="passenger">
<option value="차종선택">차종선택</option>
<option value="세단">세단</option>
<option value="suv">suv</option>
<option value="소형차">소형차</option>
</select>
</div>
<br>
<div class="container">
<h3>인원수</h3>
<select id="passenger" name="passenger">
<option value="전체">전체</option>
<option value="2인">1~2인</option>
<option value="4인">4인</option>
<option value="4인이상">4인이상</option>
</select>
</div>
<br>
<div class="container">
<h3>대여료</h3>
<select id="rentalFee" name="passenger">
<option value="~">전체</option>
<option value="~30000">30,000원 이하</option>
<option value="30000~50000">30,000원 ~ 50,000원</option>
<option value="50000~100000">50,000원 ~ 100,000원</option>
<option value="100000~">100,000원 이상</option>
</select>
</div>
<br>
<div class="container">
<h3>연료규정</h3>
<input type="checkbox" name="fuel" value="전체">전체 <input
type="checkbox" name="fuel" value="full to none">full to
none
</div>
</div>
<br>
<div class="row">
<c:forEach var="cr" items="${cr }">
<div class="col-md-4 col-sm-6 col-lg-4 item" data-carmodel="${cr.CARMODEL }"
data-passenger="${cr.PASSENGER }" data-rentalfee="${cr.RENT }">
<div class="post-box">
<div class="post-thumb">
<img src="/control/uploads/${cr.IMG}" class="img-fluid" alt="post-img" />
<div class="date">
<span>${cr.CARCOM }</span> <span>${cr.CARNAME }</span>
</div>
</div>
<div class="post-info">
<li>인원수 : ${cr.PASSENGER }</li>
<li>대여료 : ${cr.RENT }</li>
<li>연료 규정 : ${cr.FUEL }</li>
<button class="button btn-dark" type="button" data-toggle="modal"
data-target="#exampleModalLong">예약하기</button>
</div>
</div>
</div>
</c:forEach>
<div class="col-md-4 col-sm-6 col-lg-4 item" data-carmodel="세단"
data-passenger="4인" data-rentalfee="50000000">
<div class="post-box">
<div class="post-thumb">
<img src="uploads/h2.png" class="img-fluid" alt="post-img" />
<div class="date">
<span>현대</span>
<span>소나타</span>
</div>
</div>
<div class="post-info">
<li>인원수 : 4인</li>
<li>대여료 : 50,000원</li>
<li>연료 규정 : full to none</li>
<button class="button btn-dark" type="button" data-toggle="modal"
data-target="#exampleModalLong">예약하기</button>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-lg-4 item" data-carmodel="세단"
data-passenger="4인" data-rentalfee="70000">
<div class="post-box">
<div class="post-thumb">
<img src="uploads/h3.png" class="img-fluid" alt="post-img" />
<div class="date">
<span>현대</span> <span>그랜져</span>
</div>
</div>
<div class="post-info">
<li>인원수 : 4인</li>
<li>대여료 : 70,000원</li>
<li>연료 규정 : full to none</li>
<button class="button btn-dark" type="button" data-toggle="modal"
data-target="#exampleModalLong">예약하기</button>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-lg-4 item" data-carmodel="suv"
data-passenger="4인" data-rentalfee="30000">
<div class="post-box">
<div class="post-thumb">
<img src="uploads/h4.png" class="img-fluid" alt="post-img" />
<div class="date">
<span>현대</span> <span>코나</span>
</div>
</div>
<div class="post-info">
<li>인원수 : 4인</li>
<li>대여료 : 30,000원</li>
<li>연료 규정 : full to none</li>
<button class="button btn-dark" type="button" data-toggle="modal"
data-target="#exampleModalLong">예약하기</button>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-lg-4 item" data-carmodel="세단"
data-passenger="4인" data-rentalfee="50000">
<div class="post-box">
<div class="post-thumb">
<img src="uploads/k1.jpg" class="img-fluid" alt="post-img" />
<div class="date">
<span>기아</span> <span>k5</span>
</div>
</div>
<div class="post-info">
<li>인원수 : 4인</li>
<li>대여료 : 50,000원</li>
<li>연료 규정 : full to none</li>
<button class="button btn-dark" type="button" data-toggle="modal"
data-target="#exampleModalLong">예약하기</button>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-lg-4 item" data-carmodel="suv"
data-passenger="4인" data-rentalfee="50000">
<div class="post-box">
<div class="post-thumb">
<img src="uploads/k2.png" class="img-fluid" alt="post-img" />
<div class="date">
<span>기아</span> <span>소렌토</span>
</div>
</div>
<div class="post-info">
<li>인원수 : 1~2인</li>
<li>대여료 : 30,000원</li>
<li>연료 규정 : full to none</li>
<button class="button btn-dark" type="button" data-toggle="modal"
data-target="#exampleModalLong">예약하기</button>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-lg-4 item" data-carmodel="suv"
data-passenger="4인" data-rentalfee="50000">
<div class="post-box">
<div class="post-thumb">
<img src="uploads/s1.jpg" class="img-fluid" alt="post-img" />
<div class="date">
<span>쌍용</span> <span>티볼리</span>
</div>
</div>
<div class="post-info">
<li>인원수 : 4인</li>
<li>대여료 : 50,000원</li>
<li>연료 규정 : full to none</li>
<button class="button btn-dark" type="button" data-toggle="modal"
data-target="#exampleModalLong">예약하기</button>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-lg-4 item" data-carmodel="세단"
data-passenger="1~2인" data-rentalfee="30,000">
<div class="post-box">
<div class="post-thumb">
<img src="uploads/j1.jpg" class="img-fluid" alt="post-img" />
<div class="date">
<span>현대</span> <span>G70</span>
</div>
</div>
<div class="post-info">
<li>인원수 : 1~2인</li>
<li>대여료 : 70,000원</li>
<li>연료 규정 : full to none</li>
<button class="button btn-dark" type="button" data-toggle="modal"
data-target="#exampleModalLong">예약하기</button>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-lg-4 item" data-carmodel="세단"
data-passenger="2인" data-rentalfee="100000">
<div class="post-box">
<div class="post-thumb">
<img src="uploads/j2.jpg" class="img-fluid" alt="post-img" />
<div class="date">
<span>현대</span> <span>G80</span>
</div>
</div>
<div class="post-info">
<li>인원수 : 1~2인</li>
<li>대여료 : 100,000원</li>
<li>연료 규정 : full to none</li>
<button class="button btn-dark" type="button" data-toggle="modal"
data-target="#exampleModalLong">예약하기</button>
</div>
</div>
</div>
</div>
<script>
const carmodelSelector = document.getElementById('carmodel');
const passengerSelector = document.getElementById('passenger');
const rentalFeeSelector = document.getElementById('rentalFee');
const items = Array.from(document.getElementsByClassName('item'));
const onChangeHandler = () => {
const carmodel = carmodelSelector.value;
const passenger = passengerSelector.value;
const [min = 0, max = Infinity] = rentalFeeSelector.value.split('~').map(n => n || undefined);
items
.map(item => { item.classList.add('hidden'); return item})
.filter(item => min <= +item.dataset.rentalfee && +item.dataset.rentalfee <= max)
.filter(item => carmodel == '차종선택' || item.dataset.carmodel === carmodel)
.filter(item => passenger == '전체' || item.dataset.passenger === passenger)
.forEach(item => item.classList.remove('hidden'));
};
carmodelSelector.onchange = onChangeHandler;
passengerSelector.onchange = onChangeHandler;
rentalFeeSelector.onchange = onChangeHandler;
</script>
</html>
자바스크립트로 셀렉트목록에 대한 검색결과를 출력하는 방식인데 DB로연동해서 DB에 있는 데이터를 맵퍼로 활용해 기입하는 도중에 막혀서 안되고있습니다 해결법좀 가르켜주시면 감사하겠습니다 ㅠㅠ
요약
1.자바스크립트로 목록을 불러와 결과물 뿌리는것 성공.
2.자바스크립트에 있는 데이터를 DB연동해서 맵퍼로 활용하는데 안됨니다.
1 답변
-
자바스크립트와 쿼리 매퍼는 직접적인 연관성이 없습니다. 자바스크립트로 브라우저에서 서버로 데이터를 보낼 수는 있으나 이걸 받는건 쿼리 매퍼보다 앞에 있는, 예를 들어 자바라면 서블릿입니다.
그런데 자바스크립트에서 ~ 쿼리 매퍼 사이에 뭔가 안된다고 JSP의 일부 코드만 올려서는 도데체 뭐가 어디서 잘못된건지 답변자도 알기 힘들지 않겠어요? 처음만 있고 중간과 끝이 빠져있으니까요.
게다가 질문 내용에는 서버 전송과 관련된 코드조차 없습니다. 도데체 이 글은 자바스크립트가 예상과 다르게 작동하는걸 묻는건가요, 아니면 서버 전송이 안되는걸 묻는건가요, 아니면 서버에서 받긴 했으나 쿼리 매퍼 만드는게 안된다는걸 묻는건가요?
저 또한 대충 짐작하기로는, 자바스크립트로 구현된 동적인 화면에서 사용자 입력을 서버로 보내 쿼리 만들고 싶으신것 같은데요. 응답을 생각하지 않았을 때 단계를 다음처럼 나눌 수 있습니다:
- 스크립트로 동적 화면 구성 및 입력값 생성
- 브라우저에서 서버로 요청 전송
- 받은 요청을 분석해서 매퍼로 쿼리 생성
오류를 해결하려면 각 단계별로 어디까지 정상 작동하는지를 보세요. 질문도 마찬가지입니다. 각 단계를 나눠서 안되는 부분과 관련된 부분만 추려서 올려주세요.
댓글 입력