)jsp
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
const regular_num = /^\d{1,4}$/;
// jQuery 초기화
$(document).ready(function(){
// 결과보기 버튼 클릭되면
$("#btn-result").click(function(){
let su1 = $("#su1").val();
let su2 = $("#su2").val();
// 정규식 체크
if(regular_num.test(su1)==false) {
alert('1~4자리 숫자만 입력하세요');
$("#su1").val("");
$("#su1").focus();
return;
}
if(regular_num.test(su2)==false) {
alert('1~4자리 숫자만 입력하세요');
$("#su2").val("");
$("#su2").focus();
return;
}
// jQuery Ajax요청
$.ajax({
// 요청 정보
url : "calc.do", // CalcAction
data : {"su1":su1, "su2":su2}, // parameter : calc.do?su1=5&su2=8
// 응답 정보
dataType : "json",
success : function(res_data){
// res_data = {"plus":13, "minus":-3, "multiply":40, "divide":0}
$("#plus").html(res_data.plus);
$("#minus").html(res_data.minus);
$("#multiply").html(res_data.multiply);
$("#divide").html(res_data.divide);
},
error : function(err){
alert(err.responseText);
}
}); // ajax() - end
}); // click() - end
}); // ready() - end
</script>
</head>
<body>
수1:<input id="su1"> <br>
수2:<input id="su2">
<input id="btn-result" type="button" value="결과보기">
<hr>
<table width="500" border="1">
<tr>
<th width="30%">더하기</th>
<td><span id="plus"></span></td>
</tr>
<tr>
<th>빼기</th>
<td><span id="minus"></span></td>
</tr>
<tr>
<th>곱하기</th>
<td><span id="multiply"></span></td>
</tr>
<tr>
<th>나누기</th>
<td><span id="divide"></span></td>
</tr>
</table>
</body>
</html>
)CalcAction
package action;
import java.io.IOException;
import java.io.PrintWriter;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
/**
* Servlet implementation class CalcAction
*/
@WebServlet("/calc.do")
public class CalcAction extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#service(HttpServletRequest request, HttpServletResponse response)
*/
protected void service(
HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {
// /calc.do?su1=5&su2=8
// 0. 수신 인코딩 설정
request.setCharacterEncoding("utf-8");
// 1. parameter 받기
int su1 = Integer.parseInt(request.getParameter("su1"));
int su2 = Integer.parseInt(request.getParameter("su2"));
int plus = su1 + su2;
int minus = su1 - su2;
int multiply = su1 * su2;
int divide = su1 / su2;
// 결과 전송
response.setContentType("application/json; charset:utf-8;");
PrintWriter out = response.getWriter();
String json = String.format("{\"plus\":%d}, {\"minus\":%d}, {\"multiply\":%d} ,{\"divide\":%d}",plus, minus, multiply, divide);
out.println(json);
}
}'웹 - Ajax' 카테고리의 다른 글
| 웹 - Ajax - 회원목록/가입 예제2(id 체크, 회원 가입) (0) | 2024.06.25 |
|---|---|
| 웹 - Ajax - 회원목록/가입 예제1 (조회까지) (0) | 2024.06.25 |
| 웹 - Ajax - 방명록 (0) | 2024.06.24 |
| 웹 - Ajax - jQuery Ajax(많이 사용) (0) | 2024.06.24 |
| 웹 - Ajax - Ajax의 뜻, 구조, js로 처리해보기 (0) | 2024.06.24 |
