【发布时间】：2013-11-22 07:06:55
【问题描述】：
由于 jQuery 的功能，我正在尝试制作一个应该从 jsp 页面调用 servlet 的 Web 应用程序$.post(...) 并在同一页面上发布结果。
到目前为止，即使在网上搜索后，我也没有运气。
作为一个菜鸟，我可能做错了什么，但我不知道是什么。
我设法将问题简化为以下MWE。
我的Test 项目中的 servlet 如下所示：
@WebServlet("/servlet")
public class Servlet extends HttpServlet {
private static final long serialVersionUID = 1L;
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String temp = request.getParameter("param");
request.setAttribute("result", temp);
RequestDispatcher view = request.getRequestDispatcher("/index.jsp");
view.forward(request, response);
}
}
如果我的index.jsp 如下所示，则网络应用按预期工作：
<%@ page language="java" import="java.util.*"
contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test page</title>
</head>
<body>
<p>Result: ${result}</p>
<form method="post" action="/Test/servlet">
<input name="param" value="value" />
<button type="submit">Send!</button>
</form>
</body>
</html>
如果我将我的 Web 应用程序部署到我的 Tomcat 7.0.47 容器中，实际上，我会得到一个带有 Result: 的页面、一个初始化为 value 的输入字段和一个 Send! 按钮.
如果我按下按钮，servlet 在/Test/servlet 中正确到达，然后页面显示为Result: value。然而，在我的项目中，我应该使用 jQuery 的函数 $.post(...) 将参数发布到 servlet 并取回属性，因此我将 index.jsp 替换为以下代码：
<%@ page language="java" import="java.util.*"
contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test page</title>
<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript">
function send() {
var value = $('#field').val();
alert('Sending: ' + value);
$.post('/Test/servlet', {
param : value
}, function(result) {
alert('Done!');
}, 'html');
}
</script>
</head>
<body>
<p>Result: ${result}</p>
<form action="/">
<input id="field" value="value" />
<button type="button" onclick="send()">Send!</button>
</form>
</body>
</html>
这一次，如果我部署 Web 应用程序并按下按钮，我会看到两个消息窗口。
第一个告诉Sending: value（意味着jQuery 2.0.3 已正确解析），第二个告诉Done!。
显然，页面没有更新以反映Result: value。
由于 servlet 没有更改，我怀疑 servlet 没有正确解析。
所以我试图用/Test/servlet/、Test/servlet/、Test/servlet、/servlet/、/servlet、servlet/ 和servlet 替换servlet/，但没有运气。
但是我注意到我没有收到Done! 消息（例如我使用/servlet 或类似的消息）。
所以，总结一下，我做错了什么？ 你能解释一下背景中发生了什么以帮助我理解吗？ 提前致谢！
感谢coding_idiot 的帮助，我终于明白了为什么我的代码无法正常工作。 我将在下面分享我的发现，希望他们也可以帮助其他人。
简单地说，上面描述的两种方法不等效，或者至少在这些术语中不等效。 实际上，第一种方法调用 servlet，该 servlet 生成一个替换初始页面的页面。 相反，第二种方法调用生成一个页面的 servlet，该页面返回到不一定被替换的初始页面。 正如coding_idiot 所建议的那样，返回的数据必须注入到某个地方才能让用户看到它。
这就是我重构上述代码以获得工作示例的方式。
servlet 的代码保持不变，但 doPost(...) 方法的倒数第二行现在显示为：
RequestDispatcher view = request.getRequestDispatcher("/results.jsp");
然后，我将上面的页面分成两个不同的部分。
第一个是index.jsp，当用户请求Web应用地址时由容器自动加载：
<%@ page language="java" import="java.util.*"
contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test page</title>
<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript">
function send() {
$.post('/Test/servlet', {
param : $('#field').val()
}, function(result) {
$("#result").html(result);
}, 'html');
}
</script>
</head>
<body>
<form>
<input id="field" value="value" />
<button type="button" onclick="send()">Send!</button>
</form>
<div id="result">
<p>Result: --</p>
</div>
</body>
</html>
请注意，表单或多或少与以前相同，但现在有一个<div id="result">，其中包含result 的默认值。
另一个区别在于函数send()，其中调用/Test/servlet 来计算result；然后在按下 Send! 按钮后，这个result 被注入到上面的<div id="result"> 中。
如上所示，servlet 将请求转发到results.jsp 的响应中，这很简单：
<p>Result: ${result}</p>
现在，当用户按下Send! 按钮时，输入字段的值作为参数传递给servlet，servlet 将参数转换为参数并将其转发到给定页面。
当此页面被解释时，预期的消息 (Result: value) 被组合并返回到 index.jsp，它被包含在 <div id="result"> 中并最终变得可见。
我想知道是否有可能使$.post(...) 完全像第一种方法一样工作，而无需立即在<body> 内声明<div id="result">。
提前感谢您提供任何建议或想法来满足这种好奇心。
【问题讨论】：
标签： javascript jquery jsp servlets post