Theme. load()
load() 메소드는 선택한 요소에서 호출하는 제이쿼리 Ajax 메소드이다.
load() 메소드는 서버에서 데이터를 읽은 후, 읽어 들인 HTML 코드를 선택한 요소에 배치한다.
또한, 선택자를 URL 주소와 함께 전송하면, 읽어 들인 HTML 코드 중에서 선택자와 일치하는 요소만을 배치한다.
예제를 통해 살펴보자.
data1.jsp 파일은 다음과 같다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p id="data1">사과</p>
<h3 id="data2">바나나</h3>
</body>
</html>
|
cs |
이를 index1.jsp 파일에서 load() 메서드를 활용해서 선택한 요소에 배치해본다.
|
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
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<p id="demo"></p>
<button type="button">button</button>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
// id가 demo인 요소 안에 "data1.jsp"의 데이터를 배치한다.
$("#demo").load("data1.jsp");
// id가 demo인 요소 안에 데이터 중 선택자가 #fruit1인 데이터만 배치한다.
$("#demo").load("data1.jsp #fruit1");
});
});
</script>
</body>
</html>
|
cs |
이번엔 파라미터를 가져와 배치하는 예제이다.
data2.jsp 파일은 다음과 같다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
txt1=<%=request.getParameter("txt1") %>
<br>
txt2=<%=request.getParameter("txt2") %>
</body>
</html>
|
cs |
index2.jsp 파일은 다음과 같다.
|
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
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<p id="demo"></p>
<button type="button">button</button>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
// txt1, txt2를 파라미터로 설정하고 load
$("#demo").load("data2.jsp", "txt1=abc&txt2=가나다");
$("#demo").load("data2.jsp", {txt1:"ABC", txt2:"라마바"}); //json 방식으로도 사용가능
});
});
</script>
</body>
</html>
|
cs |
그 결과 버튼을 누르면,
다음은 callback함수를 이용하여 load() 메서드를 사용하는 예제이다.
위와 동일하게 data2.jsp파일을 이용하고,
|
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
36
37
38
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<div id="demo"></div>
<button type="button">button</button>
<script type="text/javascript">
$(function(){
$("button").click(function(){
$("#demo").load(
"data2.jsp", // 접근할 파일
{txt1:"ABC", txt2:"라마바"}, // 넘겨받을 매개변수
function name(data, status, xhr){
$('#demo').append('<p>'+data+'</p><br>');
$('#demo').append('<p>status='+status+'</p><br>');
$('#demo').append('<p>xhr='+xhr+'</p><br>');
$('#demo').append('<p>xhr.status='+xhr.status+'</p><br>');
$('#demo').append('<p>xhr.statusText='+xhr.statusText+'</p><br>');
}
);
});
});
</script>
</body>
</html>
|
cs |
이때,
data: 데이터를 저장하는 객체
status: 상태를 갖고 있는 객체. 성공하면 'success' 반환, 에러가 발생하면, 'error' 반환
xhr: XMLHttpRequest 객체
Theme. $.ajax()
$.ajax() 메서드는 모든 제이쿼리 Ajax 메소드의 핵심이 되는 메서드이다.
$.ajax() 메서드는 HTTP 요청을 만드는 강력하고도 직관적인 방법을 제공한다.
먼저, json 파일이 준비되어 있다.(data.json)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
[
{
"name":"홍길동",
"age":24,
"address":"서울시",
"phone":"123"
},
{
"name":"성춘향",
"age":16,
"address":"남원시",
"phone":"234"
},
{
"name":"홍두께",
"age":22,
"address":"강릉시",
"phone":"345"
}
]
|
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<p id="demo"></p>
<button type="button">button</button>
<script type="text/javascript">
$("button").click(function(){
$.ajax({
// 요청
url:"data.json", // 클라이언트가 HTTP 요청을 보낼 URL 주소
type:"get", // HTTP 요청 방식(GET, POST)
datatype:"json", // 서버에서 보내줄 데이터의 타입
// 데이터
success: function(data){
// alert("success");
// alert(data);
// alert(JSON.stringify(data));
for(i = 0; i < data.length; i++){
$("#demo").append((i + 1) + " ");
$("#demo").append(data[i].name + " ");
$("#demo").append(data[i].age + " ");
$("#demo").append(data[i].address + " ");
$("#demo").append(data[i].phone + "<br>");
}
},
error: function(){
alert("error");
},
});
});
</script>
</body>
</html>
|
cs |
그 결과 버튼을 누르면,
또 하나의 예제를 살펴보자.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
// JDBC -> 데이터를 산출
String name = "홍길동";
int age = 24;
String birth = "2001/06/17";
// json + 내장객체
String str = "{ \"name\":\"" + name + "\", \"age\":" + age + ", \"birth\":\"" + birth + "\" }";
out.println(str); // { "name":"홍길동", "age":24, "birth":"2001/06/17" }
%>
|
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<p id="name"></p>
<p id="age"></p>
<p id="birth"></p>
<br>
<button type="button">button</button>
<script type="text/javascript">
$(function () {
$("button").click(function(){
$.ajax({
url:"data.jsp", // 클라이언트가 HTTP 요청을 보낼 URL 주소
type:"get", // HTTP 요청 방식(GET, POST)
datatype:"json", // 서버에서 보내줄 데이터의 타입
success:function(data){
// alert('success');
// alert(data.trim());
let json = JSON.parse(data);
// alert(json);
$("#name").text(json.name);
$("#age").text(json.age);
$("#birth").text(json.birth);
},
error:function(){
alert('error');
}
});
});
});
</script>
</body>
</html>
|
cs |
그 결과 버튼을 누르면,
