Простой калькулятор с JSP/Servlet и Ajax
Это своего рода продолжение моего предыдущего вопроса, но я чувствую, что он заслуживает того, чтобы ответить сам по себе, особенно из-за очень подробного ответа, который я получил.
Я хотел бы создать простой калькулятор в JSP. Там будут два текстовых поля для цифр и кнопка добавления. В идеале я хочу, чтобы ответ появлялся на странице без перезагрузки, но из полученного ответа он кажется слишком большим для моего масштаба. Я могу думать о: 1) распечатать ответ в третьем текстовом поле (это возможно?) Или как-то загрузить ту же страницу (с помощью кнопки "Добавить" и все) с ответом (и иметь возможность вводить разные цифры и т. Д.),
Можете ли вы предложить хороший способ сделать это?
4 ответа
это кажется слишком большим для моего масштаба
Это действительно зависит от контекста и функциональных требований. Это довольно просто и тривиально. Больше похоже на то, что это "слишком много информации" для вас и что вам на самом деле нужно изучать отдельные понятия (HTTP, HTML, CSS, JS, Java, JSP, Servlet, Ajax, JSON и т. Д.) По отдельности, чтобы получить более широкую картину (сумма всех этих языков / методов) становится более очевидной. Вы можете найти этот ответ полезным тогда.
В любом случае, вот как вы могли бы сделать это с помощью JSP/Servlet без 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>
с 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.
}
Заставить Ajaxical работать не так уж и сложно. Это вопрос включения следующего JS в HTML-код JSP <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 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 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>
Вероятно, самым простым способом будет создание формы с двумя полями и кнопка отправки. На стороне сервера вы можете добавить два числа и распечатать его. Smt как:
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 и JavaScript. Вы можете избежать использования вычисления Java на стороне сервера для этого.
На мой взгляд, мы должны стараться поддерживать наименьшую нагрузку на сервер. Зачем загружать сервер, когда это можно сделать на стороне клиента?
Простые вычисления, такие как сложение, вычитание, умножение и деление, могут быть достигнуты путем написания таких функций JavaScript, как add(a, b), sub(a, b), mul(a, b), div(a, b). И эти функции могут быть вызваны при различных событиях нажатия кнопки.