gpt4 book ai didi

java - 使用 JSP/Servlet 和 Ajax 的简单计算器

转载 作者:太空狗 更新时间:2023-10-29 22:38:47 25 4
gpt4 key购买 nike

这是我的 previous question 的延续,但我觉得它应该独立存在,尤其是因为我得到了非常详细的答案。

我想用 JSP 创建一个简单的计算器。将有两个数字文本框和一个添加按钮。理想情况下,我希望答案在不重新加载的情况下出现在页面中,但从我得到的答案来看,它似乎对我的规模来说太大了。我可以想到:1)将答案打印到第三个文本框(这可能吗?)或以某种方式加载带有答案的同一页面(使用添加按钮和所有按钮)(并能够输入不同的数字等等) .

执行此操作的好方法是什么?

最佳答案

it seems too big for my scale

这实际上取决于上下文和功能要求。虽然它非常简单和微不足道。这听起来更像是对您来说“信息太多”,您实际上需要学习单独的概念(HTTP、HTML、CSS、JS、Java、JSP、Servlet、Ajax、JSON 等)单独 以便更大的图景(所有这些语言/技术的总和)变得更加明显。你可能会发现 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映射到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 的东西工作也不是那么难。这是在 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);
}

关于java - 使用 JSP/Servlet 和 Ajax 的简单计算器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4114742/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com