상세 컨텐츠

본문 제목

jQuery - JSON 데이터를 호출하고 검색 건수 확인 예제

Development/JS

by 에스프리터 2018. 3. 8. 01:07

본문


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>&nbsp;
상품명 :&nbsp;<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 안내] 
- Github에서 파일을 확인하시려면 바로가기를 눌러주세요.
- 해당 예제는 espriter_practice/WebContent/'03_11_jQuery_read_json' 에 있습니다.


본 포스팅은 IT 교육기관인 KIC 캠퍼스에서 공부하며 작성한 리포트입니다.
혹시 잘못된 내용이 있거나 문제 소지시 댓글 남겨주시면 조치하겠습니다.

태그

관련글 더보기

댓글 영역