我正在尝试制作一个 Web 应用程序，该应用程序应该通过jQuery的功能从jsp页面调用servlet并在同一页面上发布结果。到目前为止，即使在网上搜索后，我也没有运气。作为一个菜鸟，我可能做错了什么，但我不知道是什么。$.post(...)
我设法将问题简化为以下MWE。我项目中的 servletTest如下所示：
@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的情况如下，则 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>
</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/, Test/servlet, /servlet/, /servlet, servlet/and替换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. 另一个区别在于调用计算 asend()的函数；然后在发送之后将其注入到上面！按钮被按下。正如我上面所展示的，servlet 将请求转发到一个响应中，它很简单：/Test/servletresultresult<div id="result">results.jsp
<p>Result: ${result}</p>
现在，当用户按下Send!按钮时，输入字段的值作为参数传递给 servlet，servlet 将参数转换为参数并将其转发到给定页面。当此页面被解释时，预期的消息 ( Result: value) 被组合并返回到index.jsp它包含在其中的位置，<div id="result">并最终变得可见。
我想知道是否可以$.post(...)在不<div id="result">立即在<body>. 提前感谢您提供任何满足这种好奇心的建议或想法。