shoptojson.jsp
<%@page import="java.sql.SQLException"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>
<%@page import="mysql.db.DbConnect"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
DbConnect db=new DbConnect();
Connection conn=db.getConnection();
PreparedStatement pstmt=null;
ResultSet rs=null;
String sql="select * from shop order by num";
String s="[";
try{
pstmt=conn.prepareStatement(sql);
rs=pstmt.executeQuery();
while(rs.next()){
String num=rs.getString("num");
String sangpum=rs.getString("sangpum");
String color=rs.getString("color");
String price=rs.getString("price");
String imagename=rs.getString("imagename");
s+="{";
s+="\"num\":\""+num+"\",\"sangpum\":\""+sangpum+"\",";
s+="\"color\":\""+color+"\",\"price\":"+price+",";
s+="\"imagename\":\""+imagename+"\"";
s+="},";
}
//마지막 컴마제거
s=s.substring(0, s.length()-1);
} catch(SQLException e){
}
s+="]";
%>
<%=s %>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
ajax_shoptojson.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap" rel="stylesheet">
<style type="text/css">
#show{
margin-top: 30px;
font-size: 1.5em;
}
div.box {
width: 40px;
height: 40px;
border: 1px solid black;
border-radius: 100px;
box-shadow: 5px 5px 6px gray;
}
</style>
<script type="text/javascript">
$(function(){
$("#btn1").click(function() {
$.ajax({
type:"get",
url:"ex5_shoptojson.jsp",
dataType:"json",
success:function(data){
var s="<table class='table table-bordered' style='width:700px;'>";
s+="<caption><h4>json shop 읽기</h4></caption>";
s+="<tr bgcolor='orange'>";
s+="<th>NO.</th><th>상품명</th><th>색상</th><th>가격</th><th>이미지</th>";
s+="</tr>";
$.each(data,function(i,elt){
s+="<tr>";
s+="<td>"+elt.num+"</td>";
s+="<td>"+elt.sangpum+"</td>";
s+="<td>"+elt.color+"<br>"
+"<div class='box' style='background-color:"+
elt.color+";'></div></td>";
s+="<td>"+elt.price+"</td>";
s+="<td><img src='"+elt.imagename+"' width='60'></td>";
s+="</tr>";
});
s+="</table>";
$("#show").html(s);
}
});
});
});
</script>
</head>
<body>
<button type="button" class="btn btn-default" id="btn1">shop db 불러오기</button>
<div id="show"></div>
</body>
</html>
'Ajax' 카테고리의 다른 글
| 211015_xml,json파일 ajax로 읽기 (0) | 2021.10.15 |
|---|---|
| 211015_db 생성후 JSONObject를 생성해서 json파일 만들기 (0) | 2021.10.15 |
| 211015_ (0) | 2021.10.15 |
| 211015_json 데이터를 ajax함수로 읽기 (0) | 2021.10.15 |
| 211015_xml데이터를 ajax함수로 읽기 (0) | 2021.10.15 |