llamar - enviar formulario con ajax java
Calculadora simple con JSP/Servlet y Ajax (4)
Esto es una especie de continuación de mi pregunta anterior , pero creo que merecía estar solo, especialmente por la respuesta tan detallada que recibí.
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 de la respuesta que obtuve, me parece demasiado grande para mi escala. 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.) .
¿Puedes sugerir una buena manera de hacer esto?
parece demasiado grande para mi escala
Eso realmente depende del contexto y los requisitos funcionales. Aunque es bastante simple y trivial. Suena más como que es "demasiada información" para usted y que realmente necesita aprender los conceptos separados (HTTP, HTML, CSS, JS, Java, JSP, Servlet, Ajax, JSON, etc.) individualmente para que la imagen sea más grande (La suma de todos esos lenguajes / técnicas) se vuelve más obvia. Puede que encuentre útil esta respuesta entonces.
De todos modos, así es como podría hacerlo con solo 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 asigna en un url-pattern de 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.
}
Hacer cosas de Ajaxical para trabajar tampoco es tan difícil. Se trata de incluir el siguiente JS dentro del <head> HTML de JSP (por favor, desplácese hacia la derecha para ver los comentarios de código que explican 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 cambiando las dos últimas líneas de doPost siguiente manera:
response.setContentType("text/plain");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(String.valueOf(sum));
Incluso puede hacer que sea una verificación condicional para que su formulario aún funcione en el caso de que el usuario haya 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);
}
Esto se puede hacer absolutamente y se puede hacer usando HTML simple y JavaScript. Puede evitar utilizar el cálculo de Java del lado del servidor para esto.
En mi opinión, deberíamos intentar mantener la menor carga en el servidor. ¿Por qué cargar el servidor cuando esto se puede hacer en el lado del cliente?
Los cálculos simples como la suma, la resta, la multiplicación y la división se pueden lograr escribiendo funciones javascript como agregar (a, b), sub (a, b), mul (a, b), div (a, b). Y estas funciones se pueden activar en diferentes eventos de clic de botón.
No estoy seguro de si esto puede ayudar pero al menos es un programa de calculadora simple
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>
Probablemente, la forma más sencilla será crear un form con dos campos y el botón Enviar. En el lado del servidor puede agregar dos números e imprimirlo. Smt como
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);
}