Ami*_*hum 17 javascript java ajax jsp servlets
这是我之前的问题的延续,但我觉得它应该独立,特别是因为我得到了非常详细的答案.
我想在jsp中创建一个简单的计算器.将有两个用于数字的文本框和一个添加按钮.理想情况下,我希望答案出现在页面中而不重新加载,但从我得到的答案来看,它似乎对我的规模来说太大了.我可以想到:1)打印第三个文本框的答案(这可能吗？)或以某种方式加载相同的页面(使用添加按钮和所有)和答案(并能够输入不同的数字等) .
你能建议一个好方法吗？
Bal*_*usC 23
这对我的规模来说似乎太大了
这实际上取决于背景和功能要求.虽然它很简单而且微不足道.它更多的声音这样说,这是"太多的信息"为你和你实际需要学习不同的概念(HTTP,HTML,CSS,JS,Java和JSP,Servlet的,AJAX,JSON等)单独使大局观(所有这些语言/技术的总和)变得更加明显.你可能会发现这个答案很有用.
无论如何,这里是你如何使用没有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);
}
| 归档时间： |
|
| 查看次数： |
33047 次 |
| 最近记录： |