728x90
반응형
SMALL
이번 내용은 제이쿼리의 ajax에 관한 내용을 적어볼껀데요~~ㅎㅎ
ajax란 쉽게 말하면 다른 웹페이지로 데이터값을 보낸다고 생각하시면 되겠고요~ㅎㅎ
특징은 실시간 작업이 가능하고 빠른 동작이 가능하다는 것입니다~!!
아무튼 간단한 ajax 예제를 통해 ajax가 어떻게 돌아가는지에 대해 알아보려고 합니다~
- ajax.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax</title>
<style type="text/css">
div{
width : 180px;
height : 300px;
margin : 5px;
float : left;
}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$('#menu1').click(function(){
$.ajax({
url : "menu.html",
dataType : "html",
success : function(data){
$('#message1').html("성공:" + data);
} ,
error : function(){
alert("실패");
}
}); // ajax
}); // click
$('#menu2').click(function(){
$.ajax({
url : "menu.html",
dataType : "html",
success : function(data){
$('#message2').html($(data).find('li'));
}
}); // ajax
});
});
</script>
</head>
<body>
<div>
<a href="#" id="menu1">메뉴보기1</a>
<span id="message1"></span>
</div>
<div>
<a href="#" id="menu2">메뉴보기2</a>
<span id="message2"></span>
</div>
<div style="clear:left">
<h3>ajax 예제입니다.</h3>
</div>
</body>
</html>
body안에 있는 div처리 되있는 부분에 a링크가 동작하게끔 ajax처리를 해줬구요~
자바스크립트 안에 ajax를 해석해보면 제이쿼리안에 #menu1을 클릭하고 html쪽으로 보내주고나서
데이터값이 갔으면 성공했다고 뜨게 해준다는 것이고 안갔으면 실패했다고 뜨게 한다는 것입니다.
그리고 두번쨰 #menu2를 보면 다른 menu.html이라고 만들었던 소스의 li값을 불러온다는 소리죠~ㅎㅎ
이번엔 menu.html값들을 살펴보도록 하죠~
- menu.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p>중식메뉴</p>
<ul>
<li>짜장면</li>
<li>짬뽕</li>
<li>탕수육</li>
<li>잡채밥</li>
</ul>
<p> 메뉴를 선택하세요 </p>
</body>
</html>
이 값들의 결과를 한번 살펴볼까요~!!
ajax는 jsp나 spring에서 mvc패턴으로 회원가입, 게시판 등의 웹페이지를 만들때, 많이 사용하오니 잘 알아두시면
많은 도움이 될 함수입니다~!!
728x90
반응형
LIST
'IT 관련,, > Java관련 언어들' 카테고리의 다른 글
| [웹/JSP]jsp model1 간단한 도서관리게시판-1(bean, oracle설정) (0) | 2020.08.08 |
|---|---|
| [웹/jQuery]제이쿼리 Json에 대해서 알아보자~!! (0) | 2020.08.02 |
| [웹/JS]자바스크립트 function사용해서 페이지 넘기기~!! (0) | 2020.07.24 |
| [웹/JS]자바스크립트 경고창에 대한 내용들~!! (0) | 2020.07.17 |
| [Java/쓰레드]Thread를 이용해 sleep를 실행시켜보자~!! (0) | 2020.06.20 |