product.html 2.56 KiB
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>Product</title>
<link rel="stylesheet" href="/webjars/bootstrap/5.1.3/css/bootstrap.min.css">
<script src="/webjars/jquery/3.6.0/jquery.min.js"></script>
<script src="/webjars/popper.js/2.9.3/umd/popper.min.js"></script>
<script src="/webjars/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({
type: 'GET',
url: '/productlist',
success: function(data){
var array = JSON.parse(data);
for(i=0; i < array.length; i++){
var obj = array[i];
html = '';
html += '<tr>';
html += '<td>' + obj.item_nm + '</td>'
html += '<td>' + obj.item_detail + '</td>'
html += '<td>' + obj.item_reg_date + '</td>'
html += '<td>' + obj.item_price + '</td>'
html += '</tr>';
$("#tableBody").append(html);
}
}
});
});
});
</script>
</head>
<body>
<h1>상품 데이터 목록 출력</h1>
<button>조회</button><table class="table table-hover">
<thead class="thead-dark">
<tr>
<th>상품이름</th>
<th>상품상세설명</th>
<th>상품등록일</th>
<th>상품가격</th>
</tr>
</thead>
<tbody id="tableBody">
</tbody>
</table>
</body>
</html>