본문 바로가기
국비 학원 가서 개발새발

국비학원 47일차) ajax, Jquery

by 휴일이 2022. 12. 6.

 

 

 

txt파일 ajax로 비동기 구현

사이트에서 버튼 누르면 txt 내용 뜨게 하기

 

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">

function getFromServer() {
	var req;
	
	if(window.XMLHttpRequest) {
		req = new XMLHttpRequest();
	} else {
		req = new ActiveXObject("Microsoft.XMLHTTP");
	}
	
	req.onreadystatechange = function() {
		if(req.readyState == 4 && req.status == 200) {
			document.getElementById("target").innerHTML = req.responseText;
		}
	}
	
	req.open("GET", "JPA.txt", true);
	req.send();
}

</script>
</head>
<body>
<div id="target" style="width:300px; height:600px; border:solid 1px black;"></div>
<button type="target" onclick="getFromServer()">Get Data</button>

</body>
</html>

 

 

 

 

ajax를 jquery 형식으로

1.POST방식, body에 append

 

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
//$() 문서의 일부를 선택하는데에 사용
//$('body') HTML 파일 내의 모든 문단 엘리멘트에 접근
//$('div') HTML 파일 내의 모든 div 엘리먼트에 접근
//$('#A') id = A인 모든 HTML 엘리먼트에 접근
//$('.b') class = b 인 모든 HTML 엘리먼트에 접근
//$(document).ready(function(){}) 문서 들어왔을 때 base로 준비된 상태라는 걸 알려줌

//$.ajax() 메서드는 HTTP 요청으로 원격 페이지를 불러오고, XMLHttpRequest 객체를 생성하여 반환하고
//인자로는 요청을 초기화하고 처리하는데 사용하는 키/값 쌍으로 이루어진 객체를 받는다
//type 요청에 사용할 HTTP 메서드를 정의하는 문자열, 즉 GET 또는 POST 디폴트 타입은 GET 메서드
//url 요청을 보낼 페이지의 url을 담는 문자열

//data 요청과 함께 보낼 맵, 문자열
//success 서버에 보낸 요청이 성공하면 수행 될 콜백 함수
//(서버에서) 반환된 데이터는 콜백함수의 파라미터 값이 된다
//append 자식 노드에 붙이고
$(document).ready(function(){
	$('#b1').click(function(){
		var name = $('.uname').val();
		var data = 'uname='+name;
		alert(data);
		
		$.ajax({
			type: "POST",
			url: "/1JqueryAjax/WelcomeServlet",
			data:data,
			success: function(data) {
				//append -> 선택된 요소의 마지막에 새로운 요소나 컨텐츠 추가
				$('body').append(data);
			}
		});
	});
});

</script>
</head>
<body>
	<form>
	<label>Enter your Name</label>
	
	<input type="text" name="uname" id="uname" class="uname"><br>
	<button type="button" id="b1">click</button>
	</form>
</body>
</html>

 

 

 

2.GET방식, body에 text

 

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
	
	$('#b1').click(function(){
		var name = $('.uname').val();
		var data = 'uname='+name;
		alert(data);
		
		$.ajax({
			type: 'GET',
			url: '/1JqueryAjax/WelcomeServlet2',
			data: data,
			success: function(data){
				$('body').text(data);
			}
			
			
		});
		
	});
	
});



</script>

</head>
<body>
<form>
	<input type="text" name="uname" id="uname" class="uname"><br>
	<button type="button" id="b1">click</button>
</form>
</body>
</html>

 

 

 

3.POST방식, div에 html

 

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
	
	$('#b1').click(function(){
		var name = $('.uname').val();
		var password = $('.password').val();
		var data = 'uname='+name+'&password='+password;
		alert(data);
		
		$.ajax({
			type: 'POST',
			url: '/1JqueryAjax/WelcomeServlet3',
			data: data,
			success: function(data){
				$('#message').html(data);
			}
			
			
		});
		
	});
	
});

</script>
</head>
<body>
	<form>
	id<input type="text" name="uname" class="uname"><br>
	pwd<input type="text" name="password" class="password"><br>
	<button type="button" id="b1">전송</button>
	</form>
	<!-- HTML 태그를 포함하여 선택한 요소 안의 내용을 가져옵니다 -->
	<div id="message"></div>
</body>
</html>

 

 

 

4.POST방식, div에 append

 

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
	$('#bass').click(function(){
		var name = $('.id').val();
		var data = 'id='+name;
		
		$.ajax({
			type: 'POST',
			url: '/1JqueryAjax/WelcomeServlet4',
			data: data,
			success: function(data){
				$('div').append(data);
			}
			
			
		});
		
	});
	
});


</script>
</head>
<body>

id<input type="text" class="id">
<button type="button" id="bass">회원 정보 검색</button>
<div></div>
</body>
</html>

 

 

 

 

5.select에서 선택한 것을 span에 html로 추가

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
	
	$('#line').change(function(){
		var name = $('#line option:selected').val();
		var data = "line="+name;
		
		$.ajax({
			type: 'POST',
			url: '/1JqueryAjax/OneServlet',
			data: data,
			success: function(data){
				$('span').html(data);
			}
		});

		
	});
	
});

</script>
</head>

<body>

<select id="line">
<option value="">호선</option>
<option value="1">1호선</option>
<option value="2">2호선</option>
<option value="3">3호선</option>
</select>

<span> </span>

</body>
</html>

 

 

 

 

 

 

 

공통 Servlet 형식

 

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html;charset=utf-8");
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		out.println(request.getParameter("uname")+"님 로그인 OK");
		out.close();
	}

 

 

 

 

 

 

 

 

 

 

 

 

728x90

'국비 학원 가서 개발새발' 카테고리의 다른 글

국비학원 48일차) ajax, Jquery, js  (0) 2022.12.07
국비학원 46일차) jquery, ajax  (1) 2022.12.05
국비학원 33일차) 혼자 개발하기  (0) 2022.11.16
국비학원 30일차) 스프링 혼자 공부  (0) 2022.11.11
국비학원 29일차) mvc  (0) 2022.11.09

관련글

티스토리툴바