728x90
welcome.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
환영합니다. <%=request.getParameter("username") %>님 <br>
환영합니다. ${param.username}님 <br>
</body>
</html>
//post()함수 방식으로 jsp파일로드하는방식 (주석부분)
ajax로 jsp파일 로드하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>$.ajax로 jsp 파일 로드하기</title>
<style>
td {
border: 1px solid gray;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*
- $.post() 함수는 post방식으로 서버와 통신하는 jQuery 함수이다.
- $.post() 함수는 서버의 welcome.jsp 페이지를 post방식으로 요청한다.
*/
$(function() {
$('#submit').click(function () {
var username = $('.username').val(); // 서버로 보낼 데이터를 입력창에서 얻어온다.
var sendData = 'username=' + username; // 입력창에서 입력받은 데이터를 문자열 형식으로 변환한다.
/* $.post( // 문자열 형식의 데이터를 welcome.jsp 파일로 보낸다.
"welcome.jsp", // 서버의 welcome.jsp 에서는 받은 데이터를 인사말을 덧붙여서 돌려준다.
sendData,
function (msg) { // 콜백함수는 서버에서 보내온 데이터를 매개변수로 얻어온다.
alert(msg);
$('#message').html(msg); // 서버로부터 받은 데이터를 id가 message인 엘리먼트에 설정한다.
}); */
$.ajax({
url :"welcome.jsp",
type :"post",
data : {"username": username},
success : function(msg){
alert(msg);
$('#message').html(msg);
}
});
return false;
});
});
</script>
</head>
<body>
<form>
<label> 이름을 입력하세요 : </label>
<input type="text" name="username" class="username"/> <br/>
<input type="button" id="submit" value="전송"/>
</form>
<div id="message"></div>
</body>
</html>
결과:
환영합니다 [입력한 이름] 님
환영합니다 [입력한 이름] 님
같은 결과가 두번 출력된다.
type : post를 submit해서
jsp파일에서 requestParameter 나 param.username으로
이름을 비동기 방식으로 받을 수 있다.
728x90
'FRONT > Jquery' 카테고리의 다른 글
| ajax - 날짜(Date) 받아오기 , Date값을 String값으로 변환 (0) | 2021.08.24 |
|---|---|
| ajax에 대하여 -$.load(), JSON파일,XML파일,JS파일 예제 (GET) (0) | 2021.08.23 |