0

我正在尝试制作一个 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>. 提前感谢您提供任何满足这种好奇心的建议或想法。

4

1 回答 1

0

function(result) { alert('Done!'); },

The result (response) returned is not used and hence, you don't see the result. You can do something like this :

  1. Add a tag with some id to your html
  2. Put response from server in that tag.

E.g.

<div id="result"></div>

Change javascript to 

 function(result) {
     $("#result").html(result);
         },
于 2013-11-10T16:32:58.633 回答