javascript, framework/vue
Step10_Ajax
bono.html
2022. 8. 26. 17:12
Step10_Ajax
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/vue/Step10_Ajax.html</title>
</head>
<body>
<h1>ajax 요청을 통해서 받아온 데이터 사용하기</h1>
<p> 페이지 전환없이 서버에 요청하는것을 ajax 라고 생각하면 된다.</p>
<div id="app">
<button v-on:click="getList">글 목록 받아오기</button>
<br />
<table>
<thead>
<tr>
<th>번호</th>
<th>작성자</th>
<th>제목</th>
</tr>
</thead>
<tbody>
<tr v-for="tmp in list" v-bind:key="tmp.num">
<td>{{tmp.num}}</td>
<td>{{tmp.writer}}</td>
<td>{{tmp.title}}</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
list:[]
},
methods:{
getList(){
//Vue 의 참조값을 self 에 담기
const self=this;
fetch("/Step04_Final/cafe/json_list.jsp")
.then(function(response){
return response.json();
})
.then(function(data){
console.log(data);
//서버로 부터 받은 데이터를 list 에 대입하기
self.list=data;
});
}
}
});
</script>
</body>
</html>
Step10_Ajax2 (클라이언트 사이드 렌더링)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/vue/Step10_Ajax2.html</title>
</head>
<body>
<h1>ajax 요청을 통해서 받아온 데이터 사용하기</h1>
<p> 페이지 전환없이 서버에 요청하는것을 ajax 라고 생각하면 된다.</p>
<div id="app">
<table>
<thead>
<tr>
<th>번호</th>
<th>작성자</th>
<th>제목</th>
</tr>
</thead>
<tbody>
<tr v-for="tmp in list" v-bind:key="tmp.num">
<td>{{tmp.num}}</td>
<td>{{tmp.writer}}</td>
<td>{{tmp.title}}</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
list:[]
},
created(){
// Vue 가 준비가 되었을때 (root component 가 준비 되었을때) 최조 한번 호출된다.
console.log("created!");
//Vue 의 참조값을 self 에 담기
const self=this;
fetch("/Step04_Final/cafe/json_list.jsp")
.then(function(response){
return response.json();
})
.then(function(data){
console.log(data);
//서버로 부터 받은 데이터를 list 에 대입하기
self.list=data;
});
},
methods:{
}
});
</script>
</body>
</html>
페이지 소스를 보면 html이 완성되지 않은 상태로 온다. javascript로 완성시킨다.
Step10_example (서버 사이드 렌더링)
<%@page import="test.cafe.dao.CafeDao"%>
<%@page import="test.cafe.dto.CafeDto"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
//글목록
List<CafeDto> list=CafeDao.getInstance().getList();
request.setAttribute("list", list);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/vue/Step10_example.jsp</title>
</head>
<body>
<h1>글목록 입니다.(서버 사이드 렌더링)</h1>
<div id="app">
<table>
<thead>
<tr>
<th>번호</th>
<th>작성자</th>
<th>제목</th>
</tr>
</thead>
<tbody>
<c:forEach var="tmp" items="${requestScope.list }">
<tr>
<td>${tmp.num }</td>
<td>${tmp.writer }</td>
<td>${tmp.title }</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</body>
</html>
서버에서 html이 완성된 상태로 온다.