728x90
SMALL
emp_search_form_json.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>emp_search_form</title>
<style>
#items >div {
display : inline-block;
width : 150px;
min-height : 150px;
padding : 5px;
box-shadow : 2px 2px 3px #999;
border-radius : 12px;
margin-right : 7px;
margin-bottom:14px;
}
.emp > div:first-child{
color : #00f;
border-bottom : 1px dotted #555;
}
.emp > div:nth-child(2){
font-weight : bolder;
}
</style>
</head>
<body>
<div id='emp_search_form'>
<h2>사원조회(JSON)</h2>
<form name='frm' method='post' id='frm'>
<label>검색어를 입력하세요 </label>
<input type='text' name='findStr' size='30' placeholder ='성명, 이메일, 연락처로 검색' />
<input type='button' value='검색' id='btnFind'/>
</form>
<hr/>
<!-- 실행된 값을 표시 -->
<div id='items'></div>
</div>
<script>
$('#btnFind').on('click', function(){
let param = $('#frm').serialize(); //form태그안에있는 정보들을 직렬화(p=v & p=v)
let req = new XMLHttpRequest(); //중요한부분
//1 오픈
req.open('get', './ajax/emp_search_json.jsp?' + param); //get타입으로 요청, **에게 자료요청 (get타입은 ?문자열형태라 간단함)
/*
* 만약 GET타입이 아닌 POST타입으로 한다면?
req.open('post', './ajax/emp_search_json.jsp?' + param);
req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;charset=utf-8'); --헤더값을 바꿔줘야함
req.send(parm);
따라서 post타입으로 전송하느니 get타입으로 전송하는 것이 편하고 단순함.
*/
//2 상태값체크
req.onreadystatechange=function(){
//console.log(req.status + "," + req.readyState);
//200 : 정상요청(송신) & 4 : 응답이 정상적으로 왔다(수신)
if(req.status==200 && req.readyState==4){
//**중요한부분(JSON.parse는 문자열을 object로 만들어주는명령어.전제조건: 문자열은 JSON구조로 되어있어야함 양옆의 큰따옴표를 빼줌)
let data = JSON.parse(req.responseText);
let doc = '';
for(var i=0 ; i<data.length ; i++){ //JSON ==> html
doc += "<div class='emp'>"
+ "<div>id :" + data[i].id +"</div>"
+ "<div>" + data[i].name + "</div>"
+ "<div>" + data[i].email + "</div>"
+ "<div>" + data[i].phone + "</div>"
+ "<div>" + data[i].salary + "</div>"
+ "</div>";
}
$('#items').html(doc); //응답정보를 text형태로 갖고와서 그 값을 items영역에 html로 표시해달라(json도 text형식이라 responseText로 받음)
}
}
//3 전송
req.send();
})
</script>
</body>
</html>
emp_search_json.jsp
<%@page import="java.util.Arrays"%>
<%@page import="java.util.ArrayList"%>
<%@page import="bean.EmpDao"%>
<%@page import="bean.EmpVo"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//?findStr = abc 입력하면 emp_search로 전달
//emp_search_form이 ajax로 요청을 함 (중간역할) = servlet, spring-controller
//사용자의 요청정보를 dao에 전달한 후 그 결과를 다시 사용자에게 반환
//emp-Search_form.jsp의 findStr버튼 ( request : 사용자의 요청정보가 들어있는 객체_그 중에서 findStr파라미터를 가져와라)
//요청된 파라미터를 가져와라 파라미터의 종류는 findStr이다. ?findStr = abc라면 findsStr이라는 변수에 abc가 들어감
String findStr = request.getParameter("findStr");
EmpDao dao = new EmpDao();
//dao의 search라는 메소드 실행 findStr에 abc라는 값이 들어감, 그 실행결과가 list타입의 EmpVo타입의 반환형을 갖고 있는것
//List<EmpVo> search(String a)라는 메소드가 EmpDao안에 있겠구나라고 생각해야함
List<EmpVo> list = dao.search(findStr);
List<String> sb = new ArrayList<String>();
//%s-문자열(string), %d-정수형(digit), %c-문자(char), %f-실수(float)
//[{'id : '%s', 'name' : '%s', 'email' : '%s', 'phone' : '%s', 'salary' : '%f'}, {}]
String fmt = "{"
+ " 'id' : '%d', "
+ " 'name' : '%s', "
+ " 'email' : '%s', "
+ " 'phone' : '%s', "
+ " 'salary' : '%10.1f' "
+ "}";
//리스트를 이런식으로 looping
for(EmpVo vo : list){//향상된 for문
String str = String.format(fmt, //fmt라는 포맷으로
vo.getEmployee_id(), //첫번째%d
vo.getFirst_name(), //두번째 %s
vo.getEmail(), //세번째 %s
vo.getPhone_number(), //네번째 %s
vo.getSalary() //다섯번째 %10.1f
);
str = str.replaceAll("'", "\"");//역슬러시해주는 이유 : 모양만 큰따옴표지 큰따옴표의 기능은 없다는 뜻
sb.add(str);
//String : 고정문자열(탐색-메모리공간확보-저장의 프로세스라서 속도가 느림)
//stringbuilder나 buffer는 저장만함
}
//toArray : 저장된 값을 배열로 바꿔라 [{A}, {B}..], toString: 그 값을 문자열로 바꿔라
out.print(Arrays.toString(sb.toArray()));
%>
728x90
LIST
'Front > AJAX' 카테고리의 다른 글
| 헷갈려서 적는 ajax-controller 데이터 보내고 받는법 (0) | 2021.11.05 |
|---|---|
| status(요청상태) (0) | 2020.12.09 |
| 사원조회(XML) (0) | 2020.12.09 |
| 사원정보조회 (0) | 2020.12.09 |
| 정수확인test (0) | 2020.12.09 |
댓글