Calculadora simple con JSP/Servlet y Ajax

Esto es una especie de continuación de mi previous question, pero creo que merecía estar solo, especialmente por la respuesta muy detallada que recibí.Calculadora simple con JSP/Servlet y Ajax

Me gustaría crear una calculadora simple en jsp. Habrá dos cuadros de texto para números y un botón para agregar. Idealmente, quiero que la respuesta aparezca en la página sin volver a cargarla, pero por la respuesta que obtuve, parece demasiado grande para mi báscula. Puedo pensar en: 1) imprimir la respuesta en un tercer cuadro de texto (¿es esto posible?) O de alguna manera cargar la misma página (con el botón agregar y todo) con la respuesta (y poder ingresar diferentes números, etc.) .

¿Puede sugerir una buena manera de hacerlo?

Fuente

2010-11-06 Amir Rachum

Se pueden crear sin ningún tipo de servlets. Solo con html + javascript. Otra forma: hacer cálculos en el servidor. Aquí necesita Ajax para evitar la recarga de la página. ¿De la forma que prefieres y dónde tienes problemas? –

parece demasiado grande para mi escala

Eso realmente depende del contexto y los requisitos funcionales. Aunque es bastante simple y trivial. Más parece que es "demasiada información" para usted y que realmente necesita aprender los conceptos por separado (HTTP, HTML, CSS, JS, Java, JSP, Servlet, Ajax, JSON, etc.) individualmente para que el la imagen más grande (la suma de todos esos lenguajes/técnicas) se vuelve más obvia. Puede encontrar this answer útil entonces.

De todos modos, aquí es cómo usted podría hacerlo con sólo JSP/servlet sin Ajax:

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>

con CalculatorServlet que se mapea en una url-pattern de /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. 
}

Making Ajaxica Las cosas para trabajar tampoco son tan difíciles. Es una cuestión de incluir los siguientes JS dentro de HTML de la página JSP <head> (por favor, desplácese hacia la derecha para ver los comentarios de código que explica lo que hace cada línea):

<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>

y el cambio de las dos últimas líneas de doPost de la siguiente manera:

response.setContentType("text/plain"); 
    response.setCharacterEncoding("UTF-8"); 
    response.getWriter().write(String.valueOf(sum));

incluso usted puede hacer que una comprobación condicional para que su forma todavía trabaja para el caso de que el usuario tiene desactivado 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); 
    }

Fuente

2010-11-06 21:37:28 BalusC

un seguimiento de los primeros fragmentos: si agrego otro botón que hace una resta, ¿cómo puedo decirle al servlet cuál fue empujado? –

El nombre y el valor del botón también se envían como parámetro de solicitud. Simplemente verifica su presencia y/o su valor. Ver también [esta respuesta] (http://stackoverflow.com/questions/954327/hidden-features-of-html/1978039#1978039). – BalusC

@BalusC: cómo pasar el valor del botón con el ejemplo JS (JQuery no lo hace para los elementos de entrada "enviar")? – AndrewBourgeois

probablemente, la forma más simple será crear form con dos campos y enviar el botón. En el lado del servidor, puede agregar dos números e imprimirlo. Smt gusta:

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); 
}

Fuente

2010-11-06 21:19:07

Esto se puede hacer absolutamente y se puede hacer usando html y JavaScript simples. Puede evitar el uso de cálculo Java del lado del servidor para esto.

En mi opinión, deberíamos tratar de mantener una carga mínima en el servidor. ¿Por qué cargar el servidor cuando esto se puede hacer en el lado del cliente?

Se pueden obtener cálculos simples como suma, resta, multiplicación y división escribiendo funciones de JavaScript como add (a, b), sub (a, b), mul (a, b), div (a, b). Y estas funciones pueden invocarse en diferentes eventos de clic de botón.

Fuente

2013-02-15 11:13:28

Como se puede imaginar, hice esta pregunta (hace mucho tiempo) no porque quería crear un inicio basado en calculadoras en línea, sino porque quería aprende JSP. –

Ok. Entendido :). Solo traté de ayudar. En mi defensa, recién comencé a usar stackoverflow para escribir respuestas. Anteriormente para mí solo era de solo lectura. :). Entonces no noté que esta pregunta fue hecha hace mucho tiempo. –

Está bien. Bienvenido a la comunidad :) –

no estoy seguro de si esto puede ayudar, pero es al menos un simple programa de cálculo

 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 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(); 
    } 
}

y el html es

<!DOCTYPE html> 
    <html> 
     <body> 
      <form action="ServletCalculator"> 
       enter first number <input name="num1" type="text"/> 
     <select name="operator"> 
      <option value="+"> + </option> 
      <option value="-"> - </option> 
      <option value="*"> * </option> 
      <option value="/">/</option> 
     </select> 
     enter second number <input name="num2" type="text"/> 
     <button type="submit"> Calculate </button> 
      </form> 
     </body> 
    </html>

Fuente

2013-08-20 17:04:06 xameeramir

Calculadora simple con JSP/Servlet y Ajax

Respuesta

Cuestiones relacionadas