728x90
반응형
<!DOCTYPE html>
<!-- /jquery1/src/main/webapp/jqueryajax/jqueryajax1.html -->
<html>
<head>
<meta charset="UTF-8">
<title>jquery를 이용한 ajax 연습</title>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#btn1").click(function(){
//$.ajax : ajax 사용
$.ajax("ajax1-1.jsp", {
success: function(data) { //서버에서 정상 처리
//data : <h1>첫번째 Jquery Ajax 연습</h1>
//$("body") : body 태그
//append(html) : html 내용 추가
$("body").append(data);
},
error : function(e) { //서버에서 오류 발생
alert("서버 오류 :" + e.status)
}
})
})
$("#rmbtn1").click(function(){
// $("h1:first").remove() //h1태그 중 가장 처음 태그 제거
// $("h1:last").remove() //h1태그 중 가장 마지막 태그 제거
// $("h1").eq(0).remove() //h1태그 중 가장 처음 태그 제거
// $("h1").eq(-1).remove() //h1태그 중 가장 마지막 태그 제거
$("h1").get(-1).remove() //h1태그 중 가장 마지막 태그 제거
})
$("#btn2").click(function(){
let param = "name=홍길동&age=20"
$.ajax({
url : "ajax1-2.jsp",
type : "POST",
data : param,
success: function(data) {
$("body").append(data);
},
error : function(e) {
alert("서버 오류 :" + e.status)
}
})
})
$("#rmbtn2").click(function(){
$("h2").get(-1).remove()
})
})
</script>
</head>
<body>
<button id="btn1">ajax1-1.jsp 호출</button>
<button id="rmbtn1">ajax1-1.jsp 호출로 추가된 내용 제거</button>
<button id="btn2">ajax1-2.jsp 호출</button>
<button id="rmbtn2">ajax1-2.jsp 호출로 추가된 내용 제거</button>
</body>
</html><%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%-- /jquery1/src/main/webapp/jqueryajax/ajax1-1.jsp --%>
<h1>첫번째 Jquery Ajax 연습</h1><%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%-- /jquery1/src/main/webapp/jqueryajax/ajax1-2.jsp --%>
<h2>안녕하세요 ${param.name}입니다.<br>나이는 ${param.age}입니다.</h2>728x90
반응형
'study > Ajax' 카테고리의 다른 글
| [Ajax] 22. Ajax로 xml 예제2 (0) | 2022.04.28 |
|---|---|
| [Ajax] 23. Ajax를 이용한 로그인 (0) | 2022.04.28 |
| [Ajax] 22. Ajax로 xml 예제1 (0) | 2022.04.27 |
| [Ajax] 22. Ajax로 xml, json 분석하기 (0) | 2022.04.27 |
| [Ajax] 22. Ajax을 이용한 게시물검색2 (0) | 2022.04.27 |