jQuery ajax-category_list_jquery2.jsp[실습]
<%@ 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();
$.ajax({
"url":"/category_list_jquery/controller",
"type":"get",
"dataType":"json",
"beforeSend":function(){
//alert("aaa");
},
"data":"command=second_category&id="+$("#first_category").val(),
"success":function(data){
//소분류 항목 삭제
$("#third_category").empty().append("<option value='default'>소분류</option>");
var txt = "";
txt = txt+"<option value='default'>중분류</option>";
$(data).each(function(i){
txt = txt+"<option value="+data[i].id+">"+data[i].name+"</option>";
});
// for(var i=0;i<data.length;i++){
// txt = txt+"<option value="+data[i].id+">"+data[i].name+"</option>";
// }
$("#second_category").html(txt);
},
"error":function(xhr){
alert("요청처리 실패 : "+xhr.status);
}
});
});
$("#second_category").bind("change",function(){
//createXhr();
$.ajax({
"url":"/category_list_jquery/controller",
"type":"get",
"dataType":"json",
"beforeSend":function(){
//alert("aaa");
},
"data":"command=third_category&id="+$("#second_category").val(),
"success":function(data){
var txt = "";
txt = txt+"<option value='default'>소분류</option>";
for(var i=0;i<data.length;i++){
txt = txt+"<option value="+data[i].id+">"+data[i].name+"</>";
}
$("#third_category").html(txt);
},
"error":function(xhr){
alert("요청처리 실패 : "+xhr.status);
}
});
});
$("#third_category").bind("change",function(){
// createXhr();
$.ajax({
"url":"/category_list_jquery/controller",
"type":"get",
"dataType":"json",
"beforeSend":function(){
//alert("aaa");
},
"data":"command=get_product_list&id="+$("#third_category").val(),
"success":function(jobj){
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);
},
"error":function(xhr){
alert("요청처리 실패 : "+xhr.status);
}
});
});
});
</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>
* 결과
