두 정수를 더하면 결과를 출력하려고 합니다.
@WebServlet("/sum/form")
public class input extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String url="/WEB-INF/views/input.jsp";
request.getRequestDispatcher(url).forward(request, response);
}위와 같이 입력 서블릿을 생성하면 다음과 같은 jsp 파일이 생성됩니다.
여기서 결과 서블릿은 양식 태그와 결과 서블릿을 통해 제출됩니다.
@WebServlet("/sum/result")
public class result extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String url="/WEB-INF/views/result.jsp";
int first=Integer.parseInt(request.getParameter("first"));
int second=Integer.parseInt(request.getParameter("second"));
int result=first+second;
request.setAttribute("result", result);
request.getRequestDispatcher(url).forward(request, response);
}될거야
result.jsp, 정답 화면,
응답: ${결과}
위의 것입니다
이 경우 화면이 변경되며 다시 계산하려면 돌아가서 새 입력 화면을 가져와야 합니다.
매번 이와 같이 새로운 요청을 하는 것이 동기 방식입니다. 또한 상태를 유지하기 위해서는 지속적으로 파라미터 값을 보내야 합니다.
동일한 소스를 사용하여 비동기 메서드를 구현하려면 먼저 jQuery를 요청해야 합니다.
결과 서블릿은 더 이상 다른 곳에서 화면 요청을 할 필요가 없습니다.
@WebServlet("/sum/result")
public class result extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
int first=Integer.parseInt(request.getParameter("first"));
int second=Integer.parseInt(request.getParameter("second"));
PrintWriter out=response.getWriter();
out.println(first+second);
}이 경우 입력 JSP는 스크립트에서 직접 데이터를 수신하고 결과를 아래의 양식 태그로 ajax해야 합니다.
그렇다면 각각의 데이터에 대해 serialize()를 통해 파라미터를 전달받고 url과 type을 설정한 후
serialize()를 통해 받은 데이터는 해당 URL에서 throw됩니다.
<%@ 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="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
<form action="result" method="get">
첫번쨰 정수 <input type="text" name="first"/>
두번쨰 정수 <input type="text" name="second"/>
<input type="button" value="제출" onclick="sum_go()"/>
</form>
<textarea id="result"></textarea>
<script>
function sum_go(){
var form=$('form(action="result")');
$.ajax({
url:'result',
method:'get',
data:form.serialize(),
success:function(result){
$("textarea#result").text(result);
},
error:function(error){
}
});
}
</script>
그런 다음 submit() 을 통해 새 URL을 가져오는 대신 ajax는 데이터 값을 URL로 지정된 메서드에 삽입하고 메서드를 실행하고 결과 값을 결과로 가져옵니다.
success:function(result) 에 넣고 익명 함수를 실행합니다.
이를 통해 웹 화면을 회전하지 않고 결과를 볼 수 있습니다.
