●
index.html -> View
data.jsp -> Singleton으로(DAO) DB와 접근해서 데이터를 가져왔다는 가정을 하자. (Model)
※ 잠시 짧은 Review!
MVC Model1 => Dao를 JSP에서 불러오고
MVC Model2 => Dao를 서블릿에서 불러온다. (서블릿 : 교통정리)
● 먼저, 기초작업부터 해주자.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p id="demo"></p>
<br>
<button type="button">click</button>
<script type="text/javascript">
$(function () {
$("button").click(function () {
$.ajax({
/* 보낼 데이터 */
url:"data.jsp",
type:"get",
datatype:"json",
success: function( obj ) {
alert('success');
},
error: function () {
alert('error');
}
});
});
});
</script>
|
cs |
data.jsp로, Get 방식, json 데이터 타입으로 데이터를 보내줄 것이다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<script type="text/javascript">
$(function () {
$("button").click(function () {
$.ajax({
/* 보낼 데이터 */
url:"data.jsp",
type:"get",
datatype:"json",
success: function( obj ) {
// alert('success');
alert( obj.num );
},
error: function () {
alert('error');
}
});
});
});
</script>
|
cs |
alert으로 데이터가 제대로 오는지 확인해주자. error 표시는 굳이 얘기 안 해도 덤!
데이터가 넘어온 문자열을 Json으로 바꾸어주는 작업을 해주자.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<script type="text/javascript">
$(function () {
$("button").click(function () {
$.ajax({
/* 보낼 데이터 */
url:"data.jsp",
type:"get",
datatype:"json",
success: function( obj ) {
// alert('success');
// alert( obj ); // 현재 문자열로 넘어오는 것이다. Json은 Object로 넘어온다. [Object object] 이런식으로! 고로, 문자열>Json으로 바꾸어주는 작업이 필요하다.
// alert( obj.num ); // Json이 아니니까 undefined가 나오는 것이다.
/* 문자열 -> Json으로 바꿔주는 작업 */
let json = JSON.parse( obj );
alert( json );
},
error: function () {
alert('error');
}
});
});
});
</script>
|
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<script type="text/javascript">
$(function () {
$("button").click(function () {
$.ajax({
/* 보낼 데이터 */
url:"data.jsp",
type:"get",
datatype:"json",
success: function( obj ) {
// alert('success');
// alert( obj ); // 현재 문자열로 넘어오는 것이다. Json은 Object로 넘어온다. [Object object] 이런식으로! 고로, 문자열>Json으로 바꾸어주는 작업이 필요하다.
// alert( obj.num ); // Json이 아니니까 undefined가 나오는 것이다.
/* 문자열 -> Json으로 바꿔주는 작업 */
let json = JSON.parse( obj );
//alert( json );
alert( json.name );
},
error: function () {
alert('error');
}
});
});
});
</script>
|
cs |
json으로 넘어온 데이터의 name을 조회한다. 끗
'개발 > JavaScript' 카테고리의 다른 글
| [Ajax] #08. MVC Model 2 :: Servlet + Ajax 적용한 간단한 예제 (2) gson 활용 (0) | 2020.07.25 |
|---|---|
| [Ajax] #07. MVC Model 2 :: Servlet + Ajax 적용한 간단한 예제 (1) (0) | 2020.07.25 |
| [Ajax] #05. xml 파싱 :: 파일 불러와서 접근하는 방법 (0) | 2020.07.25 |
| [Ajax] #04. Json 파일 읽어오기 :: for문, each문 사용 (0) | 2020.07.25 |
| [Ajax] #03. Ajax 예제 :: (2) Click시 jsp -> html -> jsp 데이터 갔다가 돌아오기 (0) | 2020.07.25 |
