JSP/Servlet 및 Ajax를 사용한 간단한 계산기
이것은 제가 이전에 했던 질문의 연장선상에 있지만, 특히 제가 받은 매우 상세한 답변 때문에 스스로 할 자격이 있다고 생각합니다.
JSP에서 간단한 계산기를 만들고 싶습니다.번호 입력란 두 개와 추가 버튼이 있습니다.이상적으로 다시 로드하지 않고 페이지에 답변이 뜨기를 원하는데 답변을 보니 제 스케일에 비해 너무 큰 것 같습니다.나는 다음 중 하나를 생각할 수 있습니다: 1) 세 번째 텍스트 상자에 답을 인쇄합니다. (이게 가능한가요?)또는 어떻게든 같은 페이지(추가 버튼 등과 함께)에 답변을 로드합니다(그리고 다양한 번호 등을 입력할 수 있습니다).
이것을 하는 좋은 방법은 무엇입니까?
제 체중계에 비해 너무 큰 것 같습니다.
그것은 정말로 상황과 기능적 요구사항에 달려있습니다.그래도 꽤 간단하고 사소한 일입니다.그것은 당신에게 "너무 많은 정보"이며 실제로 개별적인 개념(HTTP, HTML, CSS, JS, Java, JSP, Servlet, Ajax, JSON 등)을 배워야 더 큰 그림(모든 언어/기술의 합)이 더 명확해질 수 있습니다.그러면 이 답이 유용할 것입니다.
어쨌든, Ajax 없이 JSP/Servlet만으로 이를 수행할 수 있는 방법은 다음과 같습니다.
calculator.jsp:
<form id="calculator" action="calculator" method="post">
<p>
<input name="left">
<input name="right">
<input type="submit" value="add">
</p>
<p>Result: <span id="result">${sum}</span></p>
</form>
와 함께CalculatorServlet지도에 표시되어 있습니다.url-pattern의/calculator:
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Integer left = Integer.valueOf(request.getParameter("left"));
Integer right = Integer.valueOf(request.getParameter("right"));
Integer sum = left + right;
request.setAttribute("sum", sum); // It'll be available as ${sum}.
request.getRequestDispatcher("calculator.jsp").forward(request, response); // Redisplay JSP.
}
아약시컬한 것들을 만드는 것 또한 그렇게 어렵지 않습니다.JSP의 HTML 안에 다음과 같은 JS를 포함하는 것에 관한 사항입니다.<head>(모든 행이 수행하는 작업을 설명하는 코드 설명을 보려면 오른쪽으로 스크롤하십시오.)
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() { // When the HTML DOM is ready loading, then execute the following function...
$('#calculator').submit(function() { // Locate HTML element with ID "calculator" and execute the following function on its "submit" event...
$form = $(this); // Wrap the form in a jQuery object first (so that special functions are available).
$.post($form.attr('action'), $form.serialize(), function(responseText) { // Execute Ajax POST request on URL as set in <form action> with all input values of the form as parameters and execute the following function with Ajax response text...
$('#result').text(responseText); // Locate HTML element with ID "result" and set its text content with responseText.
});
return false; // Prevent execution of the synchronous (default) submit action of the form.
});
});
</script>
그리고 마지막 두 줄을 바꾸는 것.doPost다음과 같이
response.setContentType("text/plain");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(String.valueOf(sum));
사용자가 JS를 비활성화한 경우에도 양식이 여전히 작동하도록 조건부 검사를 수행할 수도 있습니다.
if ("XMLHttpRequest".equals(request.getHeader("X-Requested-With"))) {
// Ajax request.
response.setContentType("text/plain");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(String.valueOf(sum));
} else {
// Normal request.
request.setAttribute("sum", sum);
request.getRequestDispatcher("calculator.jsp").forward(request, response);
}
이것이 도움이 될지는 모르겠지만, 적어도 간단한 계산기 프로그램입니다.
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
/* READ THE FIRST NUMBER FROM TEXTBOX NAMED num1 */
Integer num1 = Integer.parseInt(request.getParameter("num1"));
/* READ THE SECOND NUMBER FROM TEXTBOX NAMED num2 */
Integer num2 = Integer.parseInt(request.getParameter("num2"));
/* READ THE OPERATOR VALUE FROM SELECT TAG NAMED operator */
String operator = request.getParameter("operator");
/* THE FINAL RESULT */
Integer result = 0;
/* THE RESPONSE TO THE CLIENT WILL BE IN HTML FORMAT */
response.setContentType("text/html");
PrintWriter out = response.getWriter();
try {
/* ALTERNATIVELY AN IF STATEMENT CAN ALSO BE USED
if("+".equals(operator))
{
result = num1 + num2;
}
else if("-".equals(operator))
{
result = num1 - num2;
}
else if("*".equals(operator))
{
result = num1 * num2;
}
else if ("/".equals(operator))
{
result = num1 / num2;
}
*/
switch(operator)
{
case("+"): /* IF PLUS */
result = num1 + num2;
break;
case("-"): /* IF MINUS */
result = num1 - num2;
break;
case("*"): /* IF MULTIPLICATION */
result = num1 * num2;
break;
case("/"): /* IF DIVISION */
result = num1 / num2;
break;
}
/* TODO output your page here. You may use following sample code. */
out.println("<!DOCTYPE html>");
out.println("<html>");
out.println("<head>");
out.println("<title>Servlet ServletCalculator</title>");
out.println("</head>");
out.println("<body>");
/* THE PART OF OUTPUT TO THE CLIENT */
out.println("<h1>" + num1 + " " + operator + " " + num2 + " = " + result + "</h1>");
out.println("</body>");
out.println("</html>");
} finally {
out.close();
}
}
HTML은 다음과 같습니다.
<!DOCTYPE html>
<html>
<body>
<form action="ServletCalculator">
Enter the first number <input name="num1" type="text"/>
<select name="operator">
<option value="+"> + </option>
<option value="-"> - </option>
<option value="*"> * </option>
<option value="/"> / </option>
</select>
Enter the second number <input name="num2" type="text"/>
<button type="submit"> Calculate </button>
</form>
</body>
</html>
가장 간단한 방법은 두 개의 필드와 제출 버튼으로 양식을 만드는 것입니다.서버 쪽에 두 개의 숫자를 추가해서 인쇄할 수 있습니다.
다음과 같은 경우:
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html");
int a = Integer.valueOf(request.getParameter("a"));
int b = Integer.valueOf(request.getParameter("b"));
int res = a + b;
response.getWriter().println(res);
}
이것은 절대적으로 할 수 있고 간단한 HTML과 자바스크립트를 이용하여 할 수 있습니다.서버측 Java 계산을 사용하지 않아도 됩니다.
서버 부하를 최소화하기 위해 노력해야 한다고 생각합니다.클라이언트 측에서 이 작업을 수행할 수 있을 때 서버를 로드하지 마십시오.
덧셈, 뺄셈, 곱셈, 나눗셈과 같은 간단한 계산은 add(a, b), sub(a, b), mul(a, b), div(a, b)와 같은 자바스크립트 함수를 작성함으로써 달성할 수 있습니다.그리고 이 기능들은 다양한 버튼 클릭 이벤트에서 호출될 수 있습니다.
언급URL : https://stackoverflow.com/questions/4114742/simple-calculator-with-jsp-servlet-and-ajax
'programing' 카테고리의 다른 글
| CSS를 사용한 대체 테이블 행 색상? (0) | 2023.10.19 |
|---|---|
| PowerShell 7을 기본값으로 설정하고 다른 버전을 제거하는 방법 (0) | 2023.10.19 |
| 'System'을(를) 구현하지 않으므로 컬렉션 초기화기로 유형 '을(를) 초기화할 수 없습니다.소장품.IE 수 많은' (0) | 2023.10.19 |
| Angularjs 인수가 문자열을 얻은 함수가 아닙니다. (0) | 2023.10.19 |
| C의 배열에서 요소 제거 (0) | 2023.10.19 |