jQuery를 이용한 카테고리 조회하기
* 강사님 소스
category_list_jquery.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!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>
<script type="text/javascript" src="json2.js"></script>
<script type="text/javascript" src="/ajax_category/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
var xhr;
//XMLHttpRequest 객체 생성하여 xhr에 할당
function createXhr(){
if(window.ActiveXObject){
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}else{
xhr = new XMLHttpRequest();
}
}
//중분류 항목 조회 요청처리
function getSecond(){
createXhr();
//선택된 대분류의 value값을 조회
var url = "controller?command=second_category&firstCategoryId="+$("#first_category").val();
//처리를 요청
xhr.onreadystatechange = getSecondCategory;
xhr.open("GET", url, true);
xhr.send(null);
}
//중분류 항목 조회 응답처리
function getSecondCategory(){
if(xhr.readyState==4){
if(xhr.status==200){
var txt = xhr.responseText;
var jsonData = JSON.parse(txt);
//소분류 항목 삭제
$("#third_category").empty().append("<option value='default'>소분류</option>");
//테이블 삭제
$("#thead").empty();
$("#tbody").empty();
//중분류 추가
var str = "<option value='default'>중분류</option>";
for(var i = 0; i<jsonData.length;i++){
str = str+"<option value='"+jsonData[i].second_category_id+"'>"+ jsonData[i].second_category_name+"</option>";
}
//$("#second_category").html(str);
//or
$("#second_category").empty().append(str);
}else{
alert("중분류 요청처리 실패 : "+xhr.status+" - "+xhr.statusText);
}
}
}
//소분류 항목 조회 요청처리
function getThird(){
createXhr();
//중분류 선택 value
var url = "controller?command=third_category&secondCategoryId="+$("#second_category").val();
xhr.onreadystatechange=getThirdCategory;
xhr.open("GET",url, true);
xhr.send(null);
}
//소분류 항목 조회 응답처리
function getThirdCategory(){
if(xhr.readyState==4){
if(xhr.status==200){
var txt = xhr.responseText;
var jsonData = JSON.parse(txt);
//테이블 삭제
$("#thead").empty();
$("#tbody").empty();
//추가
var str = "<option value='default'>소분류</option>";
for(var i=0;i<jsonData.length;i++){
str = str +"<option value='"+jsonData[i].third_category_id+"'>"+jsonData[i].third_category_name+"</option>";
}
$("#third_category").html(str);
//or
//$("#third_category").empty().append(str);
}else{
alert("소분류 요청처리 실패 : "+xhr.status+" - "+xhr.statusText);
}
}
}
//상품 목록 조회 요청
function getProductList(){
createXhr();
var url = "controller?command=get_product_list&thirdCategoryId="+$("#third_category").val();
xhr.onreadystatechange=getProductListByThirdCategory;
xhr.open("GET",url, true);
xhr.send(null);
}
function getProductListByThirdCategory(){
if(xhr.readyState==4){
if(xhr.status==200){
var txt = xhr.responseText;
var jsonData = JSON.parse(txt);
///*
$("#thead").empty().append($("<tr>")
.append($("<td>").text("제품ID"))
.append($("<td>").text("제품명"))
.append($("<td>").text("제조사"))
.append($("<td>").text("제품가격")));
$("#tbody").empty();
for(i = 0; i<jsonData.length;i++){
$("#tbody").append(
$("<tr>").append($("<td>").text(jsonData[i].productId))
.append($("<td>").text(jsonData[i].productName))
.append($("<td>").text(jsonData[i].productMaker))
.append($("<td>").text(jsonData[i].productPrice))
)
}
//*/
////////////////html()이용////////////////////
/*
var theadStr = "<tr><td>제품ID</td><td>제품명</td><td>제조사</td><td>제품가격</td></tr>";
var tbodyStr="";
for(i = 0; i<jsonData.length;i++){
tbodyStr = tbodyStr + "<tr><td>"+jsonData[i].productId+"</tr>";
tbodyStr = tbodyStr + "<td>"+jsonData[i].productName+"</tr>";
tbodyStr = tbodyStr + "<td>"+jsonData[i].productMaker+"</tr>";
tbodyStr = tbodyStr + "<td>"+jsonData[i].productPrice+"</tr></tr>";
}
$("#thead").html(theadStr);
$("#tbody").html(tbodyStr);
*/
}else{
alert("제품조회 요청처리 실패 : "+xhr.status+" - "+xhr.statusText);
}
}
}
</script>
<style type="text/css">
table, th, td{
border-collapse: collapse;
border: 1px solid black;
}
table{
width:700px;
}
</style>
</head>
<body>
대분류 :
<select name="first_category" id="first_category" onChange="getSecond()">
<OPTION VALUE='DEFAULT'>대분류</OPTION>
<c:forEach var="fc" items="${requestScope.firstCategory }">
<option value="${fc.first_category_id }">
${fc.first_category_name }
</option>
</c:forEach>
</select>
중분류 :
<SELECT id="second_category" onChange="getThird()">
<OPTION VALUE='DEFAULT'>중분류</OPTION>
</SELECT>
소분류 :
<SELECT id="third_category" onChange="getProductList()">
<OPTION VALUE='DEFAULT'>소분류</OPTION>
</SELECT>
<p>
<table>
<thead id="thead"></thead>
<tbody id="tbody"></tbody>
</table>
</body>
</html>
* 내 소스
category_list_jquery.zip
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!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>
<style type="text/css">
table, tr, td ,th{
border: 1px solid black;
border-collapse: collapse;
padding: 10px;
}
table{
width: 1000px;
}
</style>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#first_category").bind("change",function(){
createXhr();
xhr.onreadystatechange = callback;
var queryString = "command=second_category&id="+$("#first_category").val();
xhr.open("GET", "/category_list_jquery/controller?" + queryString, true);
xhr.send(null);
});
$("#second_category").bind("change",function(){
createXhr();
xhr.onreadystatechange = callback1;
var queryString = "command=third_category&id="+$("#second_category").val();
xhr.open("GET", "/category_list_jquery/controller?" + queryString, true);
xhr.send(null);
});
$("#third_category").bind("change",function(){
createXhr();
xhr.onreadystatechange = callback3;
var queryString = "command=get_product_list&id="+$(this).val();
xhr.open("GET", "/category_list_jquery/controller?" + queryString, true);
xhr.send(null);
});
});
function callback() {
//서버로부터 응답이 왔다면 일한다.
if (xhr.readyState == 4) {//응답을 다 받은 경우
if (xhr.status == 200) {//응답코드가 200인 경우 - OK
var resTxt = xhr.responseText;//서버가 보낸 응답
var jobj = JSON.parse(resTxt);
//소분류 항목 삭제
$("#third_category").empty().append("<option value='default'>소분류</option>");
$("#second_category").html("<option value='default'>중분류</option>");
//배열을 돌면서 하나씩 첨자 붙여주기each사용, function()에 매개변수 지정 : 반복 횟수(배열의 index)를 전달해준다.- 0부터
for ( var i = 0; i < jobj.length; i++) {
$("#second_category").append("<option value="+jobj[i].id+">"+jobj[i].name+"</option>");
}
//$("#second_category").html(txt);
} else {
alert("요청처리가 정상적으로 안되었습니다.\n" + xhr.status);
}
}
}
function callback1() {
//서버로부터 응답이 왔다면 일한다.
if (xhr.readyState == 4) {//응답을 다 받은 경우
if (xhr.status == 200) {//응답코드가 200인 경우 - OK
var resTxt = xhr.responseText;//서버가 보낸 응답
var jobj = JSON.parse(resTxt);
var txt = "";
txt = txt + "<option value='default'>소분류</option>";
for ( var i = 0; i < jobj.length; i++) {
txt = txt+"<option value="+jobj[i].id+">"+jobj[i].name+"</option>";
}
$("#third_category").html(txt);
//or
//$("#third_category").empty().append(txt);
/* $(jobj).each(function(){
alert(this.id);
alert(this.name);
});//위의 for문을 jQuery의 each를 사용해서 다음과 같이 바꿀 수도 있다. */
} else {
alert("요청처리가 정상적으로 안되었습니다.\n" + xhr.status);
}
}
}
function callback2() {
//서버로부터 응답이 왔다면 일한다.
if (xhr.readyState == 4) {//응답을 다 받은 경우
if (xhr.status == 200) {//응답코드가 200인 경우 - OK
var resTxt = xhr.responseText;//서버가 보낸 응답
var jobj = eval("(" + resTxt + ")");
var thead = document.getElementById("thead");
var childCnt = thead.children.length;
for (var i = 0; i < childCnt; i++) {
thead.removeChild(thead.firstChild);
}
var tr = document.createElement("tr");
var td1 = document.createElement("th");
var td2 = document.createElement("th");
var td3 = document.createElement("th");
var td4 = document.createElement("th");
var td5 = document.createElement("th");
tr.setAttribute("bgcolor", "yellow");
td1.innerHTML = "상품ID";
td2.innerHTML = "상품명";
td3.innerHTML = "상품가격";
td4.innerHTML = "상품MAKER";
td5.innerHTML = "상품정보";
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
tr.appendChild(td5);
thead.appendChild(tr);
var tbody = document.getElementById("tbody");
var childCnt1 = tbody.children.length;
for ( var i = 0; i < childCnt1; i++) {
tbody.removeChild(tbody.firstChild);
}
if(jobj==""){
var tr = document.createElement("tr");
var td1 = document.createElement("td");
td1.setAttribute("colspan", "5");
td1.innerHTML= "데이터가 없습니다.";
tr.appendChild(td1);
tbody.appendChild(tr);
return;
}
for ( var i = 0; i < jobj.length; i++) {
var tr = document.createElement("tr");
tr.setAttribute("align", "center");
var td1 = document.createElement("td");
td1.setAttribute("width", "100");
var td2 = document.createElement("td");
td2.setAttribute("width", "200");
var td3 = document.createElement("td");
td3.setAttribute("width", "100");
var td4 = document.createElement("td");
td4.setAttribute("width", "150");
var td5 = document.createElement("td");
td5.setAttribute("width", "400");
td1.appendChild(document.createTextNode(jobj[i].productId));
td2.appendChild(document.createTextNode(jobj[i].productName));
td3.appendChild(document.createTextNode(jobj[i].productPrice));
td4.appendChild(document.createTextNode(jobj[i].productMaker));
td5.appendChild(document.createTextNode(jobj[i].productInfo));
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
tr.appendChild(td5);
tbody.appendChild(tr);
}
} else {
alert("요청처리가 정상적으로 안되었습니다.\n" + xhr.status);
}
}
}
function callback3(){
if (xhr.readyState == 4) {//응답을 다 받은 경우
if (xhr.status == 200) {//응답코드가 200인 경우 - OK
var resTxt = xhr.responseText;//서버가 보낸 응답
//var table1 = document.getElementById("table1");
var jobj = eval("(" + resTxt + ")");
var txt = "";
//alert(jobj);
if(jobj==""){
txt = txt+"<table border='1' width='950' cellspacing='0' cellpadding='10'>";
txt = txt+"<tr bgcolor='yellow' align='center'>";
txt = txt+"<td width='100'>상품ID</td>";
txt = txt+"<td width='200'>상품명</td>";
txt = txt+"<td width='100'>상품가격</td>";
txt = txt+"<td width='150'>상품MAKER</td>";
txt = txt+"<td width='400'>상품정보</td>";
txt = txt+"</tr>";
txt = txt+"<tr align='center'>";
txt = txt+"<td colspan='5'>조회된 데이터가 없습니다.</td>";
txt = txt+"</tr>";
txt = txt+"</table>";
}else{
txt = txt+"<table border='1' width='950' cellspacing='0' cellpadding='10'>";
txt = txt+"<tr bgcolor='yellow' align='center'>";
txt = txt+"<td width='100'>상품ID</td>";
txt = txt+"<td width='200'>상품명</td>";
txt = txt+"<td width='100'>상품가격</td>";
txt = txt+"<td width='150'>상품MAKER</td>";
txt = txt+"<td width='400'>상품정보</td>";
txt = txt+"</tr>";
for(var i=0;i<jobj.length;i++){
txt = txt+"<tr align='center'>";
txt = txt+"<td>"+jobj[i].productId+"</td>";
txt = txt+"<td>"+jobj[i].productName+"</td>";
txt = txt+"<td>"+jobj[i].productPrice+"</td>";
txt = txt+"<td>"+jobj[i].productMaker+"</td>";
txt = txt+"<td>"+jobj[i].productInfo+"</td>";
txt = txt+"</tr>";
}
txt = txt+"</table>";
}
$("#table1").html(txt);
// table1.innerHTML = txt;
}
}
}
</script>
</head>
<body>
대분류 : <select id="first_category">
<option>대분류</option>
<c:forEach items="${requestScope.firstCategoryList }" var="firstCategoryList">
<option value="${firstCategoryList.id }">${firstCategoryList.name }</option>
</c:forEach>
</select>
중분류 : <select id="second_category"><option value="default">중분류</option></select>
소분류 : <select id="third_category" ><option value="default">소분류</option></select>
<p>
<table>
<thead id="thead"></thead>
<tbody id="tbody"></tbody>
</table>
<div id="table1"></div>
</body>
</html>
* 결과
