21.02.26

[AJAX]

*web.xml은 컨트롤러보다 앞서서 특정 상황을처리(ex.에러상황)
* 라이브러리
- cos.jar : 파일업로드시
- commons-dbcp : 커넥션가져올때
- ojdbc:db 커넥션맺어줄때

- 뭔가 동작시켰을때 콘솔에서 status : 200가 나오면 서버에 정상적으로 보냈는데 
  서버에서 응답이 없는것이다.

동기방식(Form)
- 전송후 기존 입력데이터가 html(jsp)상에서 모두 지워진다.
- 데이터를 다른 페이지에 전달 가능하다.

비동기방식(AJAX)
- 전송 후 기존 데이터가 html(jsp)상에 유지된다
- 비동기 방식은 데이터를 다른페이지에 전달 할수 없다.
- 요청한 페이지에게만 보낼수 있다.

[로그인에 Ajax 활용]

[asyscLogin.jsp]
<body>
  <h3>비동기방식 로그인</h3>
    <table>
      <tr>
        <th>ID</th>
        <td><input type="text" id="userId"/></td>
      </tr>
      <tr>
	<th>PW</th>
	<td><input type="password" id="userPw"/></td>
      </tr>
      <tr>
	<td colspan="2">
	  <input id="send" type="button" value="login"/>
	  <input type="button" value="회원가입" onclick="location.href='joinForm.jsp'"/>
	</td>
      </tr>
    </table>
  </body>
<script>
    $('#send').click(function(){
	var id = $('#userId').val();
	var pw = $('#userPw').val();
	console.log(id+"/"+pw);
		
    $.ajax({
	type:'post'//[GET|POST] (전송방식)
	,url:'asyscLogin'//action(어디에 요청할 건지)
	,data:{//parameter (보낼데이터)
	  'id':id,
	  'pw':pw
	}
	,dataType:'json'//주고받을 데이터 타입
	,success:function(data){//성공한내용은 data로 들어옴
	    console.log(data); 
	    alert(data.msg)
	    if(data.success==1){ //쿼리가 성공했을때
		location.href="main.jsp";//main으로 이동
	    }
	}
	,error:function(e){//실패할 경우 해당 내용이 e로들어옴
	    console.log(e);
	}
    });		
});
</script>

-Ajax 사용방법
$.ajax({
type:[GET|POST] (전송방식)
,url: 어디에 요청할 건지, form에서 action 역할
,data:{ // parameter (보낼데이터)
  'id':id, 어떠한이름으로(form안에서의 name역할) : 어떤데이터
  'pw':pw
}
,dataType:'json'//주고받을 데이터 타입
,success:function(data){//성공한내용은 data로 들어옴
    console.log(data);
    alert(data.msg)
    if(data.success==1){
	location.href="main.jsp";
    }
}
,error:function(e){//실패할 경우 해당 내용이 e로들어옴
    console.log(e);
}
});

[main.jsp]
<body>
    <button id="popup1">1번 팝업</button>
    <button id="popup2">2번 팝업</button>
    <button id="popup3">3번 팝업</button>

    <div id = "listArea"></div>
    <div id ="noticeArea"></div>
</body>
<script>
    //ajax를 이용해 다른 html파일을 불러  올수  있다.
    $.ajax({
	type:'get'
	,url:'./include/list.html'
	,dataType:'html'
	,success:function(data){
	    $('#listArea').html(data);//성공시 해당 id영역html에 data삽입
	},error:function(e){
	    console.log(e)
	}
    });
	
    $('button').click(function(e){
	console.log(e.target.id);//이벤트가 실행된게 어떤버튼인지 알수있음
	$('#noticeArea').load('./include/notice.html #'+e.target.id,function(res,stat){
	    console.log(res);//가져온 페이지의 전체소스
	    console.log(stat);//성공,실패여부
	});
    });
</script>

- J-QUERY에서 다른페이지를 불러오는 기능
   : $(표현할위치).load(불러올 페이지[id|class|tag],callback)
- 버튼에 따라서 각기 다른 내용의 팝업을 띄우고 싶을 때, 원래대로라면 3개의 팝업이 모두 
  main.jsp에 있어야 하므로 소스길이가 길어지게된다. 
  같은 팝업을 여러개 페이지에서 사용한다면 각페이지마다 팝업소스를 모두 붙여넣기 해야한다.
- 이 경우 ajax를 통한 페이지 불러오기가 유용하게 사용된다.
- jsp:include는 동기방식이라 이벤트가 일어났을때 실행되는게 아니라 그냥 가져오는 거만 가능하고, 
  ajax는 비동기방식이라 기존것을 유지한상태로 가져오기 때문에 특정한 이벤트가 일어났을때 
  가져오는게 가능하다.

Author And Source

이 문제에 관하여(21.02.26), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@mingmang17/21.02.26

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

21.02.26

[AJAX]

[로그인에 Ajax 활용]

Author And Source

좋은 웹페이지 즐겨찾기