-
211015_json 데이터를 ajax함수로 읽기Ajax 2021. 10. 15. 17:27
ex2_data1.json
[
{"term":"컴퓨터의 이해","part":"no.1","definition":"하드웨어의 알기",
"quote":["하드웨어란","CPU란","RAM이란"],"author":"이수연"},
{"term":"자바의 정석","part":"no.2","quote":["연산자","제어문","클래스구조"],"author":"남궁성"},
{"term":"HTML","part":"no.3","quote":["table","img","h태그"],"author":"김정인"},
{"term":"스프링 프레임워크","part":"no.4","definition":"Spring이란?"}
]
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<%@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 info order by num";
String s="[";
try{
pstmt=conn.prepareStatement(sql);
rs=pstmt.executeQuery();
while(rs.next()){
String num=rs.getString("num");
String name=rs.getString("name");
String hp=rs.getString("hp");
String age=rs.getString("age");
String photo=rs.getString("photo");
s+="{";
s+="\"num\":"+num+",\"name\":\""+name+"\",\"hp\":\""+hp;
s+="\",\"age\":"+age+",\"photo\":\""+photo+"\""; //"num":num 형태
s+="},";
}
//마지막 ,콤마 제거
s=s.substring(0, s.length()-1);
} catch(SQLException e){
} finally{
db.dbClose(rs, pstmt, conn);
}
s+="]";
%>
<%=s %>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
infotojson.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
<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>
<style type="text/css">
#show{
font-family: 'Nanum Pen Script';
font-size: 1.3em;
margin-top: 30px;
}
</style>
</head>
<body>
<button type="button" class="btn btn-info" id="btn1">data1.json읽기</button>
<button type="button" class="btn btn-info" id="btn2">infotojson.jsp읽기</button>
<hr>
<div id="show"></div>
<script type="text/javascript">
$("#btn1").click(function() {
$.ajax({
type:"get",
url:"ex2_data1.json",
dataType:"json",
success:function(data){
var s="";
$.each(data,function(i,elt){
s+="<div class='alert alert-success' style='width:500px;'>";
s+="index: "+i+"<br>";
s+="과목명: "+elt.term+"<br>";
s+="과목설명: "+(elt.definition==null?"설명없음":elt.definition)+"<br>";
s+="과정: ";
if(elt.quote==null){
s+="과정없음";
} else {
//여러개이기에 each함수 이용
$.each(elt.quote,function(i2,elt2){
s+="["+elt2+"]";
});
}
s+="<br>";
s+="저자명: ";
if(elt.author==null)
s+="작자미상";
else
s+=elt.author;
s+="</div>";
});
$("#show").html(s);
}
});
});
//버튼2
$("#btn2").click(function() {
$.ajax({
type:"get",
url:"../day1014_ajax/infotojson.jsp",
dataType:"json",
success:function(data){
var s="";
$.each(data,function(i,elt){
s+="<div class='alert alert-danger' style='width:500px;'>";
s+="Index: "+i+"<br>";
s+="번호: "+elt.num+"<br>";
s+="이름: "+elt.name+"<br>";
s+="나이: "+elt.age+"<br>";
s+="<img src='"+elt.photo+"' width='100'<br>";
s+="</div>";
});
$("#show").html(s);
}
});
});
</script>
</body>
</html>
'Ajax' 카테고리의 다른 글
211015_xml,json파일 ajax로 읽기 (0) 2021.10.15 211015_db 생성후 JSONObject를 생성해서 json파일 만들기 (0) 2021.10.15 211015_db생성하여 jsp에서 json으로 변환후 ajax로 불러오기 (0) 2021.10.15 211015_ (0) 2021.10.15 211015_xml데이터를 ajax함수로 읽기 (0) 2021.10.15