ajax-test
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel = "stylesheet" href = "../css/mystyle.css" type="text/css">
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$('#sync').on('submit', function(){
$('form').submit();
})
$('#gasync').on('click', function(){
//입력한 값 가져오기
//idval = document.getElementById('gid').value;
idval = $('#gid').val();
nameval = $('#gname').val();
passval = $('#gpass').val();
telval = $('#gtel').val();
//서버로 보내기 - ajax를 사용하는 비동기 방식 - get
//요청객체 생성
xhr = new XMLHttpRequest();
xhr.open("get", "ajaxTest.jsp?id="+idval+
"&pass=" + passval +
"&name=" + nameval +
"&tel=" + telval , true);
xhr.send();
//응답 - 서버로부터 실행 결과를 받는다 - result2에 출력
xhr.onreadystatechange = function(){
//readyState : 0,1,2,3,4 status : 200, 300~, 400~, 500
if(this.readyState == 4 && this.status == 200){
$('#result2').html(this.responseText);
}//if
}//onreadystatechange
})//click
$('#pasync').on('click', function(){
//입력한 값 가져오기
idval = $('#pid').val();
nameval = $('#pname').val();
passval = $('#ppass').val();
telval = $('#ptel').val();
xhr = new XMLHttpRequest();
//요청
xhr.open("post", "ajaxTest.jsp", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("id=" + idval + "&pass=" + passval +
"&name=" + nameval + "&tel=" + telval);
//응답
xhr.onreadystatechange = function(){
alert(this.readyState);
if(this.readyState == 4 && this.status == 200){
text = this.responseText
$('#result3').html(text);
}
}
})
}) //$(function())
</script>
</head>
<body>
<div class = "box">
동기 방식 : 전송하고 서버에서 실행된 결과를 새로운 페이지로 출력<br>
ajax 사용하지 않는 방식<br>
<form action="ajaxTest.jsp" method="post">
아이디<input type="text" id="aid" name="id"><br>
비밀번호<input type="password" id="apass" name="pass"><br>
이름<input type="text" id="aname" name="name"><br>
전화번호<input type="text" id="atel" name="tel"><br>
<button id="sync" type = "submit">동기</button>
</form>
<br><br>
<div id = "result1"></div>
</div>
<div class = "box">
비동기 - get : 전송하고 서버에서 실행된 결과를 새로운 페이지가 아닌
현재 페이지의 result2에 출력한다<br>
<form>
아이디<input type="text" id="gid" name="id"><br>
비밀번호<input type="password" id="gpass" name="pass"><br>
이름<input type="text" id="gname" name="name"><br>
전화번호<input type="text" id="gtel" name="tel"><br>
<button id="gasync" type = "button">비동기get</button>
</form>
<div id = "result2"></div>
</div>
<div class = "box">
비동기 - post : 전송하고 서버에서 실행된 결과를 새로운 페이지가 아닌
현재 페이지의 result3에 출력한다<br>
<form>
아이디<input type="text" id="pid" name="id"><br>
비밀번호<input type="password" id="ppass" name="pass"><br>
이름<input type="text" id="pname" name="name"><br>
전화번호<input type="text" id="ptel" name="tel"><br>
<button id="pasync" type = "button">비동기post</button>
</form>
<br><br>
<div id = "result3"></div>
</div>
</body>
</html>jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
table{
border : 2px solid blue;
}
td{
width: 200px;
height : 50px;
text-align: center;
}
</style>
</head>
<body>
Hello
<%
//자바문장 기술
request.setCharacterEncoding("UTF-8");
String userId = request.getParameter("id");
String userPass = request.getParameter("pass");
String userName = request.getParameter("name");
String userTel = request.getParameter("tel");
%>
<table border="1">
<tr>
<td>아이디</td>
<td><%= userId %></td>
</tr>
<tr>
<td>이름</td>
<td><%= userName %></td>
</tr>
<tr>
<td>전화번호</td>
<td><%= userTel %></td>
</tr>
</table>
</body>
</html>
신입 개발자 입니다!!!