jQuery
jQuery - 결과가져오기
프리덕
2020. 7. 29. 22:57
|
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//대상 파일 string1.jsp
$.ajax('string1.jsp',{
success:function(returndata){
//string1.jsp에서 받은 출력값을 'body' 태그 뒤부분에 추가
$('body').append(returndata);
}
});
//btn 클릭했을 때 string1.jsp 에서 받은 출력값을 table 태그 뒤부분에 추가해보기
$('#btn').click(function(){
$.ajax('string1.jsp',{
success:function(returndata){
$('table').append('<tr><td>'+returndata+'</td></tr>');
}
});
$(this).unbind();//이벤트를 한번 만 실행하고 종료하는 명령어.
});
});
</script>
</head>
<body>
<h1>js_jQuery2/string1.html</h1>
<table border="1">
</table>
<input type="button" value="데이터가져오기" id="btn">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax('string2.jsp',{
data:{name:'홍길동',
age:20
},
success:function(returndata){
//body 태그 뒤부분에 추가
$('body').append(returndata);
}
});
$('#btn').click(function(){
$.ajax('string2.jsp',{
data:{name:$('#name').val(),
age:$('#age').val()
},
success:function(returndata){
$('table').append('<tr><td>'+returndata+'</td></tr>');
$('div').html(returndata);
}
});
});
});
</script>
</head>
<body>
<h1>js_jQuery2/string2.html</h1>
<table border="1">
</table>
이름 : <input type="text" name="name" id="name"><br>
나이 : <input type="text" name="age" id="age"><br>
<div></div>
<input type="button" value="데이터 가져오기" id="btn"><br>
</body>
</html>
|
cs |
문법만 익숙해진다면 너무 쉽게 적용이 가능한 것 같다. append는 계속 중첩으로 결과를 가져와서 출력하는 것이고
html은 한 번만 출력시켜주는 결과만 비춰주는 문법이니 헷갈리지 말고 적용시켜야 할 상황에 따라 잘 사용하여야겠다.