这是我previous question 的延续，但我觉得它值得单独使用，特别是因为我得到了非常详细的答案。
我想在 JSP 中创建一个简单的计算器。将有两个数字文本框和一个添加按钮。理想情况下，我希望答案出现在页面中而无需重新加载，但从我得到的答案来看，这对我的规模来说似乎太大了。我可以想到：1）将答案打印到第三个文本框（这可能吗？）或以某种方式加载相同的页面（带有添加按钮和所有）答案（并且能够输入不同的数字等等） .
有什么好的方法可以做到这一点？
【问题讨论】：
标签： java javascript ajax jsp servlets
我不确定这是否有帮助，但它至少是一个简单的计算器程序：
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>
【讨论】：
这绝对可以完成，并且可以使用简单的 HTML 和 JavaScript 完成。您可以避免为此使用服务器端 Java 计算。
在我看来，我们应该尽量保持服务器上的最小负载。如果可以在客户端完成，请不要加载服务器。
简单的计算，如加法、减法、乘法和除法，可以通过编写像 add(a, b), sub(a, b), mul(a, b), div(a, b) 这样的 JavaScript 函数来实现.并且可以在不同的按钮点击事件上调用这些函数。
【讨论】：
可能，最简单的方法是创建一个带有两个字段和一个提交按钮的form。在服务器端，您可以添加两个数字并打印出来。
类似：
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);
}
【讨论】：
对我来说似乎太大了
这实际上取决于上下文和功能要求。虽然它非常简单和微不足道。听起来这对您来说“信息太多”，并且您实际上需要单独学习单独的概念（HTTP、HTML、CSS、JS、Java、JSP、Servlet、Ajax、JSON 等） em> 以便更大的图景（所有这些语言/技术的总和）变得更加明显。你可能会发现this answer 很有用。
不管怎样，下面是你如何在没有 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 映射在 /calculator 的 url-pattern 上：
@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 的东西工作起来也不是那么难。只需在 JSP 的 HTML <head> 中包含以下 JS（请向右滚动查看代码 cmets，其中解释了每一行的作用）：
<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);
}
【讨论】：
serialize() 函数完成的。谢谢你的叫醒。