Ajax
Ajax(1) 값 전달, 페이지에 데이터 전달 후 값 보기
Jini0
2018. 8. 23. 10:54
|
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 |
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
Ajax : Asynchronous Java Script Xml (비동기)
데이터를 넘겨주지만 페이지는 바뀌지 않는다..!!!!!!
. XML , Json (json 을 많이 씀) 을 생성해서 사용하는 경우가 많다.
Ajax 는 JQuery 소속
<p id="demo">여기가 id demo 입니다</p>
<button>버튼</button>
<script type="text/javascript">
//비동기 - 페이지는 유지하면서 값만 가져올 때
//현재 장면은 안변하는데 외부에서 data 를 가져올 때 밑에처럼 씀( 외부파일은 NewFile.html 임)
$(document).ready(function () {
$("button").click(function () { //id 등록이 안됨
//$("#demo").load("NewFile.html");
$("#demo").load("NewFile.html #session01"); //이러면 외부파일에서 선택한 아이디의 태그를 가져온다
//해당 태그의 id 가 있는 곳에 load 하는데 그 load할 데이터는 NewFile 에 있는 해당 아이디가 있는 태그의 value 값을 가지고 온다 });
/* $("button").on("click",function(){ //id 등록이 됨
}); */
});
</script>
</body>
</html> |
cs |
index.jsp
==========================================================================================
index1.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 PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
입력 : <input type="text" id="data"> <!-- 입력된 값 다른곳에 저장하고 여기로 가져와서 보여준다. -->
<p id="demo">여기가 id demo 입니다</p>
<button>버튼</button>
<script type="text/javascript">
$(function () {
/* $("button").click(function (){
$("#demo").load("NewFile.jsp", "t1=" +$("#data").val() + "&t2=World"); //값 넘겨주고 값 바꾸고 다시 가져와서 위에 demo 에 띄어줌
}); */
$("button").click(function (){
$("#demo").load("NewFile.jsp",{t1:"ABC", t2:"DBD" }); //Json 방식으로 넘겨줌
//데이터가 json 방식을 짜여있고 이 데이터를 보내고 NewFile.jsp 파일에서 값을 getParameter 로 데이터를 받아온다. t1 ,t2 는 name 이라고 생각하면 된다.
});
});
</script>
</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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46 |
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<p id="demo">여기가 id demo 입니다</p>
<button>버튼</button>
<script type="text/javascript">
$(function () {
$("button").click(function () {
$("#demo").load("NewFile.html", function (data,status,xhr) { //function (d,s,x) 이렇게해도 되는데 3개의 파라미터가 자동적으로 넘어옴
//데이터를 정상적으로 읽어 왔는지 확인하는 가인수들
if(status == "success") //이렇게 달아놓으면 무조건 성공할 떄만 이 message 가 나온다.
{
//데이터를 성공적으로 받아왔을 때 data 는 받아온 data 값이 들어가고 status 는 success 로 return 되고 $("#demo").append("data : " + data + "<br>");
$("#demo").append("status = " + status + "<br>"); // 모두 정상이라면 success
$("#demo").append("xhr.status = " + xhr.status + "<br>"); // 성공하면 나오는 페이지 200
$("#demo").append("xhr.statusText = " + xhr.statusText + "<br>"); // 200 나오면 success
}
});
});
});
</script>
</body>
</html> |
cs |
==========================================================================================
index3.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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54 |
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
입력 : <input type="text" id="data">
<p id="demo">여기가 id demo 입니다</p>
<button>버튼</button>
<script type="text/javascript">
//ajax 의 접근법
$(document).ready(function () {
$("button").click(function () {
//ajax 쓰는 법
$.ajax({
//속성을 설정할 수 있다
url:"NewFile.jsp", //데이터를 넘겨줄 링크 설정
type:"GET", // get or post 방식
data:"t1=" + $("#data").val()+"&t2=Ajax", //넘겨줄 데이터
//위에 과정이 성공했을 것을 생각하여 작성
//ajax를 통해서 연결 성공하면 출력
//데이터가 전달되고 나서 다시 돌아왔을 때의 검사하는 것
//생략하면 안됨 적어줘야 한다.
success: function (data, status, xhr) {
alert("통신 성공!");
$("#demo").html(data);
},
error: function (xhr, status, error) {
alert("통신 실패!");
},
complete: function (xhr, status) {
alert("통신 종료");
}
});
});
});
</script>
</body>
</html> |
cs |
type : http 전송 method를 지정한다. GET, POST
url : 호출 URL. GET 방식일경우 URL 뒤에 파라미터를 붙여서 사용해도 된다
dataType : Ajax를 통해 호출한 페이지의 Return 형식이다. 형식에 따라 xml, json, html, text 등을 사용하면 된다
==========================================================================================
NewFile.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p id="session01">세션1 입니다</p>
<p id="session02">세션2 입니다</p>
</body>
</html> |
cs |
==============================================================================================================
NewFile.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 PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- //넘겨줬다가 넘겨 받는 것 -->
t1=<%=request.getParameter("t1") %><!-- t1 에 대한 데이터를 가져온다. -->
t2=<%=request.getParameter("t2") %><!-- t2 에 대한 데이터를 가져온다. -->
</body>
</html> |
cs |