16주차 - Spring (17) ajax를 데이터베이스와 연동해보자
2022. 10. 24. 16:25ㆍSpring framwork
이번의 목표
01. ajax를 이용하여 데이터베이스와 연동하여 키워드에 따른 값을 출력해보자.
지난 시간까지는 디스크에 저장된 json 파일을 사용하여 값을 출력하는 것을 공부했습니다.
바로 직전에 사용하던 json을 데이터베이스에 저장했으니 이제는 데이터베이스에 있는 값을 이용하여 값을 비교하는 것에 대해 공부해보겠습니다.
이번에는 새로운 것을 공부하는 것이 아닌 지금까지 배운 것들을 응용/활용 하는 부분입니다.
json, DBCP, ajax을 중심으로 지금까지 배운것들을 응용하여 코드를 작성해보겠습니다.
01. 페이지 코드
02. 컨트롤러 코드
03. 서비스 코드
04. 실행 화면
01. 페이지 코드
<head>
<meta charset="UTF-8">
<title>ex06</title>
<script type="text/javascript">
var req;
function send() {
var title = document.getElementById('title').value
console.log("title : "+title)
req = new XMLHttpRequest();
req.onreadystatechange = changeText
req.open('post','ex06')
req.setRequestHeader('Content-Type',"application/json; charset=UTF-8")
req.send(title)
}
function changeText() {
if(req.readyState==4 && req.status==200){
var tbody = document.getElementById('tbody')
tbody.innerHTML = "아직은 데이터가 없음"
var resData = JSON.parse(req.responseText)
var printData =''
for(i = 0; i < resData.list.length; i++){
printData += "<tr><td>"+resData.list[i].title+"</td>"
printData += "<td>"+resData.list[i].artist+"</td>"
printData += "<td>"+resData.list[i].price+"</td></tr>"
}
tbody.innerHTML = printData
}
}
</script>
</head>
<body onload="send()">
<input type="text" id="title" onkeyup="send()">
<table border="1">
<thead>
<tr>
<th>title</th>
<th>artist</th>
<th>price</th>
</tr>
</thead>
<tbody id="tbody"></tbody>
</table>
</body>02. 컨트롤러 코드
@GetMapping("ex06")
public String ex06Get() {
return "ajax/ex06";
}
@ResponseBody
@PostMapping(value="ex06", produces = "application/json; charset=UTF-8")
public String ex06Post(@RequestBody(required = false) String title){
ArrayList<AjaxDTO> lists = service.find(title);
String data = "{\"list\":[";
for(int i =0;i<lists.size();i++) {
AjaxDTO list = lists.get(i);
if(data.contains(list.getTitle())) {
continue;
}
data += "{\"title\":\"" + list.getTitle()+"\"";
data += ", \"artist\":\""+list.getArtist()+"\"";
data += ", \"price\":\""+list.getPrice()+"\"},";
}
data = data.substring(0,data.length()-1);
data += "]}";
return data;
}03. 서비스 코드
@Autowired
private AjaxRepository repo;
public ArrayList<AjaxDTO> find(@RequestBody(required = false)String title){
if(title == null) {
ArrayList<AjaxDTO> lists = repo.viewAll();
return lists;
}
ArrayList<AjaxDTO> search = repo.find(title);
if(search.size()==0) {
ArrayList<AjaxDTO> lists = repo.viewAll();
return lists;
}
return search;
}04. 실행 화면
'Spring framwork' 카테고리의 다른 글
| 17주차 - Spring(19) 암호화에 대해 알아보자. (0) | 2022.10.24 |
|---|---|
| 17주차 - Spring(18) ajax를 데이터베이스와 연동해보자 - 2 (0) | 2022.10.24 |
| 16주차 - Spring (16) json 파일의 내용을 데이터베이스에 저장해보자 (0) | 2022.10.24 |
| 16주차 - Spring (15) 키워드로 파일에서 원하는 목록을 찾아보자 (0) | 2022.10.24 |
| 16주차 - Spring (14) 저장된 json 파일을 이용하여 테이블을 출력해보자 (0) | 2022.10.21 |