如何使用从 Servlet 发送并由 JavaScript 通过 Jquery 接收的数据更改网页内容？

Question

我正在学习使用 Servlet 和 JavaScript，方法是尝试构建一个 Java servlet 和 JavaScript 代码可以交换数据的应用程序。我构建了一个带有 Header 和按钮的简单网页。单击按钮后，客户端应向服务器发送 AJAX 请求，服务器应发送一些数据作为响应，相应地更改 Header 上的文本。我正在使用 jQuery 发送和接收数据，并更改 Header 上的文本。这是 HTML 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>$(function() { alert('hello') });</script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="Try.js"></script>
</head>
<body>
    <h1 align = "center" id="header">Using Visual Studio</h1>
    <button id="button">Click</button>

</body>
</html>

这是 Try.js Java脚本代码 jQuery :

$(function(){
   $("button").click(function(){
        $.ajax({url: "localhost:8080/Ajax/Serv", success: function(result){
                $("#header").html(result);
    }});

  });
});

下面是 servlet 代码：

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import jdk.nashorn.internal.parser.JSONParser;

@WebServlet("/Serv")
public class Serv extends HttpServlet {
    private static final long serialVersionUID = 1L;

    public Serv() {
        super();

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html; charset=UTF-8");
        response.getWriter().write("Success Data!!!");
    }


    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

}

网页 Header 应在单击按钮 "Click" 时显示 "Success Data!!!"。然而，这并没有发生。我在服务器端口 8080 上使用 TomCat 7.0.39。

Answer 1

您似乎是从文件系统（例如 file:///C:/Ajax/serv.html）而不是本地主机（例如 http://localhost:8080/Ajax/serv.html).这就是为什么您在尝试 Ajax 调用时收到跨源请求被阻止错误的原因，这是您的浏览器正在阻止的跨站点脚本 (XSS) 安全漏洞。

您应该将 html（js 等）文件移动到新的 Tomcat webapps 文件夹下，例如 webapps/Ajax) 并使用 http://localhost:8080/Ajax/serv.html 加载它们。这将防止 XSS 问题。

同时向 Ajax 调用添加错误处理程序将有助于确定问题。

 $("button").click(function(){
    $.ajax({url: "localhost:8080/Ajax/Serv",
     success: function(result){
            $("#header").html(result);
     },
     error: function(xhr, status, ex) {
        alert("state=" + xhr.state() + ", status=" + status);
     }
});

Answer 2

HTML/JSP 页面无法访问 servlet 的一个常见原因是 servlet 尚未部署。测试此场景的一个简单方法是在 eclipse 中创建一个带有 HTML/JSP 页面和 servlet 的动态 Web 项目 ▸ 右键单击 HTML/JSP 页面 ▸ 运行 As ▸ 运行在服务器上

它将提供来自服务器的 HTML/JSP 页面。但是，你尝试在浏览器中访问 servlet，它会显示 404 错误，因为 servlet 尚未部署。

现在，停止服务器 ▸ 右键单击 servlet ▸ 运行作为 ▸ 运行在服务器上

您将看到这次可以访问 servlet。如果单击以该 servlet 作为操作的按钮（或其他控件），则可以看到来自服务器的响应。

我已经显示了带有我的 Web 项目结构的屏幕截图。我尝试了您的代码，并且能够毫无问题地获得预期的结果。

如何使用从 Servlet 发送并由 JavaScript 通过 Jquery 接收的数据更改网页内容？

How to change contents of a webpage, using data sent from a Servlet and received by JavaScript via Jquery?

html

javascript

java

jquery

servlets