728x90
jQuery 통하여 Ajax 구현
jQuey의 Ajax 속성
url : request해서 데이터 전송할 url
data : 서버로 전송할 데이터의 parameter 설정값
datatype : 서버의 response 데이터의 형식(xml, text, json, html 등) 지정 값
- 디폴트시 auto
success(data) : 통신 성공 시, 호술되는 함수 지정값. 파라미터로 response 데이터(data)를 받음
error : 통신 실패 시, 호출되는 함수 지정값. 역시 파라미터로 response 데이터(data)를 받음
complete : 통신 성패 여부 관계 없이 통신 실행완료 후 실행되는 함수 지정값
async : 비동기(true)/동기(false) 지정
1.버튼 누르면 전송값을 서버에 출력하기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-3.6.0.min.js"></script>
<title>Insert title here</title>
<style>.test{width:300px; min-height:50px; border:1px solid red;}</style>
</head>
<body>
<h1>jQuery-Ajax구현</h1>
<h3>1.client가 server에 requset</h3>
이름 : <input type="text" id="myName">
<button id="nameBtn">전송</button>
<script>
$('#nameBtn').on('click',function(){
var userName = $('#myName').val();
$.ajax({
url: 'jQueryAjaxServlet1',
type: 'get',
data: {userName:userName},
success: function(){
alert('전송 성공');
},
error: function(){
alert('전송 실패');
},
complete: function(){
alert('성공실패 상관없이 무조건 실행되는 complete');
}
});
});
</script>
</body>
</html>
@WebServlet("/jQueryAjaxServlet1")
public class JQueryAjax1 extends HttpServlet {
private static final long serialVersionUID = 1L;
public JQueryAjax1() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("서블릿도착");
String name = request.getParameter("userName");
System.out.println(name);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
2.버튼 누르면 서버에서 보낸 값을 사용자가 수신하기
<h3>2.버튼 선택 시, 서버에서 보낸 값 사용자가 수신</h3> <!-- 서버가 클라이언트에 response -->
<button id="getServerTextBtn">서버에서 보낸 값 확인</button>
<p class="test" id="p1"></p>
<script>
$('#getServerTextBtn').click(function(){
$.ajax({
url:'jQueryAjax2',
// data : 서버에서 사용자에게 보낼 데이터가 없으므로 기술x
type : 'get',
success: function(data){
alert('성공');
console.log(typeof data);
$('#p1').text(data);
},
error: function(){
alert("에러 발생");
},
complete: function(){
alert('comeplete work');
}
});
});
</script>
response.getWriter().print("서버에서 전송한 데이터 입니다");
728x90
반응형
'small steps > 1일 1코딩 - 코딩을 내 몸처럼' 카테고리의 다른 글
[1일1코딩] (0) | 2022.05.12 |
---|---|
[1일1코딩][jQuery-Ajax] 서버 기본 전송 값에서 결과로 str 받아처리하기 & 객체형태 데이터를 서버에 전송하고 서버에서 처리하기서버에서 보낸 값 사용자가 수신 (0) | 2022.05.11 |
[1일1코딩] (0) | 2022.05.09 |
22.05.08 운동기록 - 짐 9일간 이사 휴무 (0) | 2022.05.08 |
[1일1코딩] (0) | 2022.05.08 |