고정 헤더 영역
상세 컨텐츠
본문
JQuery를 활용하여 JSON 데이터를 호출하고 검색 건수를 확인하는 예제입니다. 사전에 sql에 입력되어 있어야 합니다.
|
<시작 | 파일명 : jq_sang_ex_JSON.html >
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jq_sang_ex_JSON.js"></script>
</head>
<body>
<h2>상품정보</h2>
<br>
<button id="btnAll">전체</button>
상품명 : <input type="text" id="sangName"><button id="btnSel">검색</button>
<br><br>
<div id="disp"></div>
</body>
</html>
<종료 | 파일명 : jq_sang_ex_JSON.html >
<시작 | 파일명 : jq_sang_ex_JSON.jsp >
<%@page import="pack.SangpumDto"%>
<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/plain; charset=UTF-8"
pageEncoding="UTF-8"%>
<jsp:useBean id="cdb" class="pack.ConnDb"/>
<%
request.setCharacterEncoding("utf-8");
String sang = request.getParameter("sang");
ArrayList<SangpumDto> list = cdb.selSangpumData(sang);
String res = "[";
for(int i = 0; i < list.size() ;i++){
SangpumDto dto = list.get(i);
res += "{\"code\":" + "\"" + dto.getCode() + "\",\"sang\":" +"\""+ dto.getSang()
+ "\",\"su\":"+ "\"" + dto.getSu() + "\",\"dan\":"+ "\"" + dto.getDan() +"\"},";
}
if(res.length()>0){
res = res.substring(0, res.length() -1);
}
res += "]";
out.println(res);
%>
<종료 | 파일명 :jq_sang_ex_JSON.jsp >
<시작 | 파일명 : js/jq_sang_ex_JSON.js >
$(document).ready(function(){
$("#btnAll").click(function(){
$.ajax({
type:"get",
url:"jq_sang_ex_JSON.jsp?sang=all",
dataType:"json",
success:function(data){
var ct=0;
var str = "<table><tr><th>코드</th><th>상품명</th><th>수량</th><th>단가</th><th>금액</th></tr>";
$.each(data,function(index, value){
str += "<tr><td>" + value.code + "</td>";
str += "<td>" + value.sang + "</td>";
str += "<td>" + value.su + "</td>";
str += "<td>" + value.dan + "</td>";
str += "<td>" + (value.su*value.dan) + "</td>";
str += "</tr>"
ct++;
});
str += "<tr><td colspan='5'>건수:" + ct + "</td></tr>";
$("#disp").html(str);
},
error:function(){
$("#disp").text("에러 발생"); //뉴 새롭게 입력
}
});
});
$("#btnSel").click(function(data){
$.ajax({
type:"get",
url:"jq_sang_ex_JSON.jsp?sang="+$("#sangName").val(),
dataType:"json",
success:function(data){
if($("#sangName").val()===null || $("#sangName").val() ===""){
alert("입력값을 넣어주세요");
return;
}
var ct=0;
var str = "<table><tr><th>코드</th><th>상품명</th><th>수량</th><th>단가</th><th>금액</th></tr>";
$.each(data,function(index, value){
str += "<tr><td>" + value.code + "</td>";
str += "<td>" + value.sang + "</td>";
str += "<td>" + value.su + "</td>";
str += "<td>" + value.dan + "</td>";
str += "<td>" + (value.su*value.dan) + "</td>";
str += "</tr>"
ct++;
});
str += "<tr><td colspan='5'>건수:" + ct + "</td></tr>";
$("#disp").html(str);
if(ct ===0){
alert("검색한 상품이 없습니다.");
$("#disp").html("검색 내역이 없습니다");
}
},
error:function(){
$("#disp").text("잘못된 접근입니다.");
}
});
});
});
<종료 | 파일명 : js/jq_sang_ex_JSON.js >
|
|
[ Console 결과]
|
[Github 안내]
- 해당 예제는 espriter_practice/WebContent/'03_11_jQuery_read_json' 에 있습니다.
본 포스팅은 IT 교육기관인 KIC 캠퍼스에서 공부하며 작성한 리포트입니다.
혹시 잘못된 내용이 있거나 문제 소지시 댓글 남겨주시면 조치하겠습니다.
'Development > JS' 카테고리의 다른 글
| 라즈베리파이에 Mariadb 설치하기 #2 (0) | 2018.05.09 |
|---|---|
| jQuery - 다른 도메인 서버의 json 자료 읽기 예제 (0) | 2018.03.08 |
| jQuery - JSON 데이터를 호출하고 검색 건수 확인 예제 (0) | 2018.03.08 |
| jQuery - Ajax 전담 메소드를 활용하여 json,xml 읽기 예제 (0) | 2018.02.28 |
| jQuery - Ajax로 자료 읽기 예제 (0) | 2018.02.28 |
| jQuery - jQuery 기본 예제 #8 (0) | 2018.02.27 |
| jQuery - jQuery 기본 예제 #7 (0) | 2018.02.27 |
댓글 영역