728x90
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- jquery -->
<script src="js/jquery-3.6.3.min.js"></script>
</head>
<body>
<script>
//js - 페이지로드 이후 실행하는 이벤트 - 페이지별로 1개만 사용가능
// window.onload = function(){
// console.log( $("btn") );
// }
//jquery - 페이지로드 이후 실행하는 함수 - 여러개 사용가능 중복으로
$(document).ready(function(){
console.log($("btn"));
})
</script>
<button id="btn">도큐먼트레디</button>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- jquery -->
<script src="js/jquery-3.6.3.min.js"></script>
</head>
<body>
<button id="btn">이벤트등록</button>
<input type="text" id="tag">
<select id="sel">
<option>1</option>
<option>2</option>
</select>
<div style="background-color: red;" id="mos">마우스이벤트</div>
<script>
//클릭
$("#btn").click(function(){
console.log("click");
})
//키 관련 이벤트
$("#tag").keyup(function(){
console.log("keyUp");
})
//체인지
$("#sel").change(function(){
console.log("change");
})
//마우스관련 이벤트
$("#mos").mouseenter(function(){
console.log("mouse 진입");
})
</script>
</body>
</html>이벤트 위임함수
</script>
<h3>이벤트 위임방식</h3>
<div id="box"></div>
<script>
setTimeout(() => {
var str = "";
str += "<a href='#'>태그1</a>";
str += "<a href='#'>태그2</a>";
str += "<a href='#'>태그3</a>";
$("#box").html(str);
}, 2000); //2초뒤에 자동 태그 생성
//on(이벤트종류, 위임시킬선택자, 핸들러)
$("#box").on("click", "a", function(){
event.preventDefault();
console.log("a링크 실행");
})
</script>
예시 )
더보기
제이쿼리
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.6.3.min.js"></script>
</head>
<body>
<button id="btn">에이젝트</button>
<script>
$("#btn").click(function(){
//ajax
$.ajax({
url : "http://localhost:8383/getAjax", //요청주소
type : "post", //요청타입
data : JSON.stringify({id: "aaa123", name: "박희진"}),//보낼 데이터
contentType : "application/json", //보내는 데이터에 대한 타입 (필수)
dataType : "json", //json,xml,text,html...등등 ( 받는 데이터에 대한 타입 default:json)(옵션)
success : function(result) {
//성공 시 콜백
console.log(result);
},
error : function(err) {
//실패 시 콜백
console.log(err);
}
})
})
</script>
</body>
</html>
스프링부트
//제이쿼리 ajax예시
@CrossOrigin({"http://127.0.0.1:5501",
"http://localhost:5501"
})
@PostMapping("/getAjax")
public Map<String, Object> getAjax(@RequestBody SimpleVO vo){
//받은 데이터
System.out.println(vo.toString());
//보내는 데이터
Map<String, Object> map = new HashMap<>();
SimpleVO vo2 = new SimpleVO( 123, "park","11");
map.put("total", 100);
map.put("data", vo2 );
return map;
}
728x90