📌 jqueryajax1.html
<!DOCTYPE html>
<!-- /ajax1/src/main/webapp/20221020/jqueryajax1.html -->
<html>
<head>
<meta charset="UTF-8">
<title>jquery를 이용한 ajax 연습</title>
<!--
http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js
CDN 방식 : 네크워크으로 javaScript 파일을 전송 받는 방식
jqeury를 사용하기 위한 자바스크립트 파일
-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
/*$(document).ready(function() {
})
*/
$(function() { //현재 페이지가 준비 완료 되면
//$("#btn1") : id 속성이 btn1인 태그를 선택
//click() : 이벤트 함수
$("#btn1").click(function() { //id = btn1 태그 클릭시
//$.ajax : ajax으로 서버에 요청.
$.ajax("jqueryajax.jsp",{
//readyState ==4 && status == 200 인 경우
success : function(data) { //정상 처리 완료
//$("body") : body 태그
$("body").append(data)
},
//readyState ==4 && status != 200 인 경우
error:function(e) { //오류 발생
alert("서버오류:" + e.status)
}
})
})
})
</script>
</head>
<body>
<button id="btn1">jqueryajax1.jsp</button>
</body>
</html>
📌 jqueryajax1.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%-- /ajax1/src/main/webapp/20221020/jqueryajax.jsp --%>
<h1>첫번째 Jquery Ajax 연습</h1>
📌 jqueryajax1.html 내용 추가
<!DOCTYPE html>
<!-- /ajax1/src/main/webapp/20221020/jqueryajax1.html -->
<html>
<head>
<meta charset="UTF-8">
<title>jquery를 이용한 ajax 연습</title>
<!--
http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js
CDN 방식 : 네크워크으로 javaScript 파일을 전송 받는 방식
jqeury를 사용하기 위한 자바스크립트 파일
-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
/*$(document).ready(function() {
})
*/
$(function() { //현재 페이지가 준비 완료 되면
//$("#btn1") : id 속성이 btn1인 태그를 선택
//click() : 이벤트 함수
$("#btn1").click(function() { //id = btn1 태그 클릭시
//$.ajax : ajax으로 서버에 요청.
$.ajax("jqueryajax.jsp",{
//readyState ==4 && status == 200 인 경우
success : function(data) { //정상 처리 완료
//$("body") : body 태그
$("body").append(data)
},
//readyState ==4 && status != 200 인 경우
error:function(e) { //오류 발생
alert("서버오류:" + e.status)
}
})
})
$("#rmbtn1").click(function() {
/* 마지막 태그
$("h1") : h1 태그들
get(-1) : 가장 뒤쪽에 있는(가장 마지지막) 인덱스 태그 선택
eq(-1) : 마지막 인덱스를 가진 태그 선택
$("h1:last") : h1 태그들 중 마지막 태그.
*/
// $("h1").get(-1).remove()
// $("h1").eq(-1).remove()
// $("h1:last").remove()
/* 첫번째 태그
get(0) : 첫번째 인덱스를 가진 태그 선택
eq(0) : 첫번째 인덱스를 가진 태그 선택
h1:first : h1태그 중 첫번째 태그
*/
// $("h1").get(0).remove()
// $("h1").eq(0).remove()
$("h1:first").remove()
})
})
</script>
</head>
<body>
<button id="btn1">jqueryajax1.jsp</button>
<button id="rmbtn1">jqueryajax1.jsp의 추가내용 제거</button>
</body>
</html>'수업(국비지원) > Ajax' 카테고리의 다른 글
| [AJAX] Exam 시도군 선택 (0) | 2023.04.21 |
|---|---|
| [AJAX] ajax - jquery 이용한 시,군,구 선택 (0) | 2023.04.21 |
| [AJAX] FETCH 함수 - ajax.js 이용, jquery ajax 파라미터 전송 (0) | 2023.04.21 |
| [AJAX] FETCH 함수 - JSON (0) | 2023.04.21 |
| [AJAX] FETCH 함수, FETCH 함수 - get 방식, post 방식 (0) | 2023.04.21 |
