반응형
1)jquery이용해 DB연결
1-1) 간단한로그인폼
1-2) 아이디중복버튼 기능 추가
1-3) 아이디 리스트추출(자동완성)
1-4) ajax를 이용해 XML문서분석
1-5) JSON방식 이용한 조회
2) model2Study 프로젝트로 넘어가기
2-1) ajaxController 및 select 구현 (태그선택시 txt파일의 모든 시를가져옴)
2-2) 구군 , 동리 선택창 구현 (집에와서곰곰히생각해보니 떠오름 난이도높음)
1) jqeury이용해 DB와연결
1-1) 간단한 로그인폼
ex08_login.html
<!DOCTYPE html>
<!--
1. 로그인버튼 클릭시 ID,PASS값을 ex08_login.jsp 페이지로전송
2.ex08_login.jsp
-member테이블을 읽어 id,pass검증
-일치 : 반갑습니다 name 님
-불일치 : 없는정보입니다
-->
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form name="f">
아이디 : <input type="text" id="id">
<input type="button" value="아이디중복" id="btn"><br>
비밀번호:<input type="password" id="pass"><br>
<input type="submit" value="로그인" id="loginbtn"><br>
</form>
<div id="message"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <!-- jquery사용을위해 -->
<script type="text/javascript">
$(function(){
$("#loginbtn").click(function(){
//파라미터설정
let param = {id:$("#id").val() , pass:$("#pass").val()}
$.ajax({
url:"ex08_login.jsp",
type:"POST",
data:param,//파라미터전달
success : function(data){ //정상응답완료
$("#message").html(data)
},
error:function(e){//에러
alert("서버오류:"+e.status)
}
})
return false; //폼 제출막기위해(페이지 리로드 방지)
})
})
</script>
</body>
</html>JSTL.zip
0.38MB
mariadb-java-client-3.5.1.jar
0.70MB
(해당jar파일들이 있어야 실행가능함 WEB_INF/lib/에넣자)
ex08_login.jsp
<sql:setDataSource var="변수명" driver="드라이버" url="주소" user password/>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><!--c태그 사용위해-->
<%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql" %><!--sql태그사용위해-->
<!-- database Connection객체 -->
<sql:setDataSource var="conn" driver="org.mariadb.jdbc.Driver"
url="jdbc:mariadb://localhost:3306/gdjdb"
user="gduser" password="1234"/>
<!-- SQL 문장 실행 -->
<!-- rs : select구문실행결과(레코드정보) -->
<sql:query var="rs" dataSource="${conn}" >
select * from member where id=? and pass=?
<sql:param>${param.id}</sql:param><!-- 1번째 '?' -->
<sql:param>${param.pass}</sql:param><!-- 2번째 '?' -->
</sql:query>
<c:if test="${!empty rs.rows}"> <!-- rs.rows : 조회된결과들 -->
<h1>반갑습니다 ${rs.rows[0].name}님</h1>
</c:if>
<c:if test="${empty rs.rows}">
<h1><font color="red">아이디or비번이 틀려요</font></h1>
</c:if>
1-2) 아이디중복버튼 기능 추가
(ex08_login.html의 script부분에추가)
$("#btn").click(function(){
if($("#id").val()==""){
$("#message").html("아이디를 입력하세요");
return;
}
//파라미터설정
let param = {id:$("#id").val()}
$.ajax({
url:"ex08_iddup.jsp",
type:"POST",
data:param,//파라미터전달
success : function(data){ //정상응답완료
$("#message").html(data)
if($("#result").is(".find")){
$("#id").val("");
//result의 id가find(존재하는ID) id입력창초기화
}
},
error:function(e){//에러
alert("서버오류:"+e.status)
}
})
return false; //폼 제출막기위해(페이지 리로드 방지)
})
ex08_iddup.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql" %>
<!-- database Connection객체 -->
<sql:setDataSource var="conn" driver="org.mariadb.jdbc.Driver"
url="jdbc:mariadb://localhost:3306/gdjdb"
user="gduser" password="1234"/>
<sql:query var="rs" dataSource="${conn}" >
select * from member where id=?
<sql:param>${param.id}</sql:param><%--1번째 '?' --%>
</sql:query>
<c:if test="${empty rs.rows}"> <%-- rs.rows : 조회된결과들 --%>
<h1 id="result" class="notfound">회원가입이 가능한 아이디입니다.</h1>
</c:if>
<c:if test="${!empty rs.rows}">
<h1 id="result" class="find"><font color="red">존재하는 아이디입니다</font></h1>
</c:if>
1-3) 아이디 리스트추출(자동완성)
ex09_auto.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.listbox{
position:relative; left: 10px;
margin: 10px; width:200px;
background-color:black; color:white;
border: 2px solid white;
}
.namelist{
margin:0px; padding:0px; list-style: none;
}
.hover{
background-color: white; color: black;
font-weight: bold;
}
</style>
</head>
<body>
<span>사용자 아이디</span>
<input type="text" name="id" id="id">
<div class="listbox"><div class="namelist"></div></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <!-- jquery사용을위해 -->
<script type="text/javascript">
$(function(){
$(".listbox").hide();
$("#id").keyup(function(){
let data = "id="+$("#id").val();
$.ajax({
url :"ex09_idlist.jsp",
type:"POST",
data:data,
success: function(html){
$(".listbox").show()
$(".namelist").html(html)
//li에마우스를 가져다대면
$("li").hover(function(){
$(this).addClass("hover")
},function(){
$(this).removeClass("hover")
})
$("li").click(function(){
$("#id").val($(this).text())//id입력창에 클릭한 문자가들어감
$(".listbox").hide();//아이디리스트는 숨겨짐
})
},
error:function(e){
alert("서버오류 : "+e.status);
}
})
})
})
</script>
</body>
</html>
ex09_idlist.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql" %>
<sql:setDataSource var="conn" driver="org.mariadb.jdbc.Driver"
url="jdbc:mariadb://localhost:3306/gdjdb"
user="gduser" password="1234"/>
<sql:query var="rs" dataSource="${conn}">
select id from member where id like?
<sql:param>${param.id}%</sql:param>
</sql:query>
<ul>
<c:forEach var="data" items="${rs.rows}">
<li>${data.id}</li>
</c:forEach>
</ul>
1-4) ajax를 이용해 XML문서분석
ex10_xml.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax이용해 xml문서 분석</title>
</head>
<body>
<button id="btn">XML연습</button>
<div id="person"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$.ajax("ex10_person.xml",{
success:function(data){
//$(data).find("person") : data의 person하위 태그들(배열로리턴)
$(data).find("person").each(function(){
//$(this) 현재 person태그
name="<li>"+$(this).find("name").text()+"</li>"
gen="<li>"+$(this).find("gender").text()+"</li>"
part="<li>"+$(this).find("part").text()+"</li>"
$("#person").append("<ul>"+name+gen+part+"</ul>")
})
}
})
})
})
</script>
</body>
</html>
ex10_person.xml
<people> <!-- 루트태그 : 1개만존재 -->
<person>
<name>홍길동</name><gender>남자</gender><part>기타</part>
</person>
<person>
<name>김길순</name><gender>여자</gender><part>드럼</part>
</person>
<person>
<name>박길수</name><gender>남자</gender><part>보컬</part>
</person>
</people>
ex11_xml.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>XML11</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<button id="allbtn">전체 구</button>
<button onclick="stateprint('east')">동구</button>
<button onclick="stateprint('west')">서구</button>
<button onclick="stateprint('south')">남구</button>
<button onclick="stateprint('north')">북구</button>
<div id="state"></div>
<script type="text/javascript">
$(function(){
$("#allbtn").click(function(){
$("#state").html(""); //div태그 내용제거
$.ajax("ex11_address.xml",{
success: function(data){
$("#state").append("<ul>");
//$(data).find("state") : state태그목록들(배열)
$(data).find("state").each(function(){
//모든state를 순회함
$("#state").append("<li>"+$(this).text()+"</li>")
})
$("#state").append("</ul>")
},
error: function(e){
alert("서버오류 : "+e.status);
}
})
})
})
function stateprint(x){
$("#state").html(""); //div태그초기화
$.ajax("ex11_address.xml",{
success:function(data){
$("#state").append("<ul>");
$(data).find(x).find("state").each(function(){
//state태그 내의 모든 텍스트를 모두 순회
$("#state").append("<li>"+$(this).text()+"</li>")
})
$("#state").append("</ul>")
},
error: function(e){
alert("서버오류 : "+e.status);
}
})
}
</script>
</body>
</html>
ex11_address.xml
<status>
<north>
<state>강북구</state><state>노원구</state><state>도봉구</state>
</north>
<south>
<state>강남구</state><state>서초구</state><state>관악구</state>
<state>금천구</state>
</south>
<east>
<state>강동구</state><state>송파구</state><state>성동구</state>
<state>광진구</state>
</east>
<west>
<state>강서구</state><state>구로구</state><state>양천구</state>
</west>
</status>
1-5) JSON방식 이용한 조회
ex12_json.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSON연습</title>
</head>
<body>
<button id="btn">JSON연습</button>
<div id="result"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$.ajax({
url:"ex12_person.jsp",
success:function(data){
let person = JSON.parse(data)
//person(배열)를 모두 순회함
$.each(person,function(i,item){
$("#result").append("<ul>")
$("#result").append("<li>"+item.name+"</li>")
$("#result").append("<li>"+item.gender+"</li>")
$("#result").append("<li>"+item.part+"</li>")
$("#result").append("</ul>")
})
}
})
})
})
</script>
</body>
</html>
ex12_person.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
[
{"name":"홍길동","gender":"남자","part":"기타"},
{"name":"김길순","gender":"여자","part":"드럼"},
{"name":"박길수","gender":"남자","part":"보컬"}
]
2) model2Study 프로젝트로 넘어가기
해당파일을
/model2Study/src/main/webapp/file/sido.txt
새로바뀐 jar파일(controller동작을 위해)
layout.jsp에 추가해야할 내용들
<footer class="footer">
<div>
<span id="si">
<select name="si" onchange="getText('si')">
<option value="">시,도를 선택하세요</option>
</select>
</span>
<span id="gu">
<select name="gu" onchange="getText('gu')">
<option value="">구군 선택하세요</option>
</select>
</span>
<span id="dong">
<select name="dong" onchange="getText('dong')">
<option value="">동리를 선택하세요</option>
</select>
</span>
</div>
.......
</footer> <script type="text/javascript">
$(function(){
let divid;
let si;
$.ajax({
url : "${path}/ajax/select",
success: function(data){
//data : ["서울특별시","경기도",.....]
console.log(data)
let arr = JSON.parse(data)
$.each(arr,function(i,item){
//item : 서울특별시
$("select[name=si]").append(function(){
return "<option>"+item+"</option>"
})
})
},
error:function(e){
alert("서버오류 : "+e.status)
}
})
})
</script>2-1) ajaxController 및 select 구현
main/java/controller/AjaxController
package controller;
import java.io.BufferedReader;
import java.io.FileReader;
import java.util.ArrayList;
import java.util.LinkedHashSet;
import java.util.Set;
import javax.servlet.annotation.WebInitParam;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import gdu.mskim.MskimRequestMapping;
import gdu.mskim.RequestMapping;
@WebServlet(urlPatterns = {"/ajax/*"},
initParams = { @WebInitParam(name = "view", value = "/view/") })
public class AjaxController extends MskimRequestMapping {
@RequestMapping("select")
public String select(HttpServletRequest request ,
HttpServletResponse response) {
BufferedReader fr = null;
String path = request.getServletContext().getRealPath("/")+ "file/sido.txt";
try {
fr = new BufferedReader(new FileReader(path));
} catch (Exception e) {
e.printStackTrace();
}
Set<String> set = new LinkedHashSet<>(); //순서가있는 set
String data = null;
try {
while((data=fr.readLine()) != null) {
String[] arr = data.split("\\s+"); //공백기준으로나눔
if(arr.length >= 3) {
set.add(arr[0].trim()); //제일 앞에 있는정보만(시,도) set에넣음
}
}
fr.close(); //이제fr은사용하지않으므로 닫아준다
}
catch(Exception e) {
e.printStackTrace();
}
request.setAttribute("list", new ArrayList<String>(set));
request.setAttribute("len",set.size());
return "ajax/select";
}
}
/webapp/view/ajax/select.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%-- /webapp/view/ajax/select.jsp --%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
[
<c:forEach var="s" items="${list}" varStatus="stat">
<%-- varStatus 인덱스번호반환해줌 --%>
"${s}" <c:if test="${stat.count < len}">,</c:if>
<%--len: set의크기 --%>
</c:forEach>
]
2-2) 구군 , 동리 선택창 구현
변경한 layout.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<c:set var="path" value="${pageContext.request.contextPath }"></c:set>
<!--..........생략 --------------------->
<footer class="footer">
<div>
<span id="si">
<select name="si" onchange="getText('si')">
<option value="">시,도를 선택하세요</option>
</select>
</span>
<span id="gu">
<select name="gu" onchange="getText('gu')">
<option value="">구군 선택하세요</option>
</select>
</span>
<span id="dong">
<select name="dong" >
<option value="">동리를 선택하세요</option>
</select>
</span>
</div>
<!--..........생략 --------------------->
<script type="text/javascript">
$(function(){
$.ajax({
url : "${path}/ajax/select",
success: function(data){
//data : ["서울특별시","경기도",.....]
let arr = JSON.parse(data)
$.each(arr,function(i,item){
//item : 서울특별시
$("select[name=si]").append(function(){
return "<option>"+item+"</option>"
})
})
},
error:function(e){
alert("서버오류 : "+e.status)
}
})
}) //여기까지의부분은 모든 시(name='si')를 AJAX를 통해 가져올거임
function getText(type) { // 시 or 도를 선택하면 발생하는 함수
const si = $("select[name=si]").val(); //클릭한 시의 vlaue
const gu = $("select[name=gu]").val();//클릭한 구의 vlaue
let url = "";
let targetSelect;
if (type === "si") {
if (!si) return;
url = "${path}/ajax/select?si="+si; //입력받은si의값을 파라미터로갖는 주소
targetSelect = $("select[name=gu]"); //target을 gu에해당하는 select태그로설정
// 시를 선택하면 기존 구, 동 초기화
$("select[name=gu]").html('<option value="">구군 선택하세요</option>');
$("select[name=dong]").html('<option value="">동리를 선택하세요</option>');
} else if (type === "gu") {
if (!si || !gu) return;
url = "${path}/ajax/select?si="+si+"&gu="+gu;
targetSelect = $("select[name=dong]");
// 구를 선택하면 기존 동 초기화
$("select[name=dong]").html('<option value="">동리를 선택하세요</option>');
} else {
return;
}
$.ajax({ //ajax에 요청을 보낼거임
url: url, //위 type에의한 url 설정
success: function(data) {
const arr = JSON.parse(data); //성공시 JSON방식(배열)으로 데이터를가져옴
$.each(arr, function(i, item) {
//해당배열을 순회해서 나온값들을 모두 taget태그하위에 option으로넣는다
targetSelect.append("<option>"+item+"</option>" );
});
},
error: function(e) {
alert("서버 오류 : " + e.status);
}
});
}
</script>
</body>
</html>
변경한 AjaxController의 select매핑부분
package controller;
import java.io.BufferedReader;
import java.io.FileReader;
import java.util.ArrayList;
import java.util.LinkedHashSet;
import java.util.Set;
import javax.servlet.annotation.WebInitParam;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import gdu.mskim.MskimRequestMapping;
import gdu.mskim.RequestMapping;
@WebServlet(urlPatterns = {"/ajax/*"},
initParams = { @WebInitParam(name = "view", value = "/view/") })
public class AjaxController extends MskimRequestMapping {
@RequestMapping("select")
public String select(HttpServletRequest request ,
HttpServletResponse response) {
String si = request.getParameter("si");
String gu = request.getParameter("gu");
BufferedReader fr = null;
String path = request.getServletContext().getRealPath("/")+ "file/sido.txt";
try {
fr = new BufferedReader(new FileReader(path));
} catch (Exception e) {
e.printStackTrace();
}
Set<String> set = new LinkedHashSet<>(); //순서가있는 set
String data = null;
try {
while((data=fr.readLine()) != null) {
String[] arr = data.split("\\s+"); //공백기준으로나눔
if(arr.length >= 3) { //무조건 시,구,동 정보(3개)가 있어야만 함
if(si==null ) {
//아무것도 선택받지않은상태
set.add(arr[0].trim()); //제일 앞에 있는정보만(시,도) set에넣음
}
else if(si!=null && gu==null && si.equals(arr[0])) {
//si(시)를 입력받은 상태 구(gu)는 입력X ( 시에 해당하는 동만 set에넣을거임)
set.add(arr[1].trim()); //제일 앞에 있는정보만(시,도) set에넣음
}
else if(si!=null && gu!=null && si.equals(arr[0]) && gu.equals(arr[1])) {
//시,구를 입력받은 상태 (해당시,구에 해당하는 동리를 set에넣을거임)
StringBuilder sb = new StringBuilder();
sb.append(arr[2].trim());
if(arr.length>3) {
sb.append(" ");
sb.append(arr[3].trim());
}
String dongg = sb.toString();
set.add(dongg);
}
}
}
fr.close(); //이제fr은사용하지않으므로 닫아준다
}
catch(Exception e) {
e.printStackTrace();
}
request.setAttribute("list", new ArrayList<String>(set));
request.setAttribute("len",set.size());
return "ajax/select";
}
}try문 부분이 중요해서 밑에다가 보기좋게 내려놓겠음!!!
try {
while((data=fr.readLine()) != null) {
String[] arr = data.split("\\s+"); //공백기준으로나눔
if(arr.length >= 3) { //무조건 시구동 정보(3개)가 있어야만 함
if(si==null ) {
//아무것도 선택받지않은상태
set.add(arr[0].trim()); //제일 앞에 있는정보만(시,도) set에넣음
}
else if(si!=null && gu==null && si.equals(arr[0])) {
//si(시)를 입력받은 상태 구(gu)는 입력X ( 시에 해당하는 동만 set에넣을거임)
set.add(arr[1].trim()); //제일 앞에 있는정보만(시,도) set에넣음
}
else if(si!=null && gu!=null && si.equals(arr[0]) && gu.equals(arr[1])) {
//시,구를 입력받은 상태 (해당시,구에 해당하는 동리를 set에넣을거임)
StringBuilder sb = new StringBuilder();
sb.append(arr[2].trim());
if(arr.length>3) {
sb.append(" ");
sb.append(arr[3].trim());
}
String dongg = sb.toString();
set.add(dongg);
}
}
} //while문종료
fr.close(); //이제fr은사용하지않으므로 닫아준다
}
catch(Exception e) {
e.printStackTrace();
}
request.setAttribute("list", new ArrayList<String>(set));
request.setAttribute("len",set.size());
return "ajax/select";
다음과같은 경우 시(도),구(시), 동(리) 의 정보가 3개미만이므로 set에들어가지않음
select.jsp (이부분은 변경없이했음)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%-- /webapp/view/ajax/select.jsp --%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
[
<c:forEach var="s" items="${list}" varStatus="stat">
<%-- varStatus 인덱스번호반환해줌 --%>
"${s}" <c:if test="${stat.count < len}">,</c:if>
<%--len: set의크기 --%>
</c:forEach>
]
출력예시
'JSP' 카테고리의 다른 글
| 부트캠프58일차( writeForm에서의 이미지사용 , {jsoupStudy}웹크롤링) (0) | 2025.04.24 |
|---|---|
| 부트캠프57일 (차트 ,DB연동, 차트를 model2에 사용 , (0) | 2025.04.23 |
| 부트캠프56일차(ajax설명,fetch , jquery , json 설명) (0) | 2025.04.22 |
| 54일차의 내용추가(book 관련) (1) | 2025.04.19 |
| 부트캠프54일 (답변게시판 , 수정 , 삭제 , 권한) (0) | 2025.04.18 |