Javascript到Java Web应用程序

Question

我正在尝试在Eclipse中做一个简单的Web项目。 我的目标是使.jsp / html文件成为表示层，使用javascript处理逻辑，并用Java处理服务器端的东西。 对于我的简单测试，我只希望能够使我的JavaScript代码与Web服务器联系并让Java代码返回日期。 这是我现在所拥有的（请注意，我仅显示“麻烦”部分）

.jsp（Timer.jsp）：

<div ><h2 id="date" class="main"></h2></div>

JavaScript（timer.js）：

var xhr = new XMLHttpRequest();
    document.getElementById("date").innerHTML = xhr.responseText;
    xhr.open("GET", "CoopTimer", true);
    xhr.send();

Java的：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // TODO Auto-generated method stub
    DateFormat dateFormat = new SimpleDateFormat("yyyy/MM/dd HH:mm:ss");
    Date date = new Date();

    request.setAttribute("date", dateFormat.format(date).toString());

    request.getRequestDispatcher("/Timer.jsp").forward(request, response);

}

我确定JavaScript是错误的，可能是麻烦所在。 因此，从本质上讲，我的目标是让标头ID“日期”从javascript获取日期，而javascript将从java servlet获取值。

如果有人能指出正确的方向，无论是资源，您有什么用，那将是非常棒的。 谢谢！

编辑：这是我使用的最终代码。 经过数小时的尝试来找出问题所在……在Eclipse中没有提及右键单击服务器上的HTML和运行方式。 一个可耻的错误，但我永远不会忘记。

这是我用来返回简单日期字符串的代码：

.jsp（Timer.jsp）：

<div ><h2 id="date" class="main"></h2></div>

Javascript（timer.js）

$("#date").load("http://127.0.0.1:14949/CoopTimer/CoopTimer");

Java的：

/**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        DateFormat dateFormat = new SimpleDateFormat("yyyy/MM/dd HH:mm:ss");
        Date date = new Date();

        response.setContentType("text/plain");  
        response.setCharacterEncoding("UTF-8"); 
        response.getWriter().write(date.toString());

        //System.out.println("PING");
    }

Answer 1

至少有两个问题。

首先：Servlet的结果是Timer.jsp呈现的内容。 而且Timer.jsp不会对servlet存储在请求中的日期做任何事情。 如果只希望servlet返回格式化的日期，则无需转发到JSP。 只需将日期写给回复的作者即可。

第二：您的JavaScript代码甚至在发送请求之前，尝试使用响应的内容更改标头的innerHTML。 这行不通。 为了使您的JS代码更易于编写和理解以及在浏览器之间移植，我的建议是使用jQuery及其AJAX函数：

$('#date').load('CoopTimer');

Answer 2

使用jquery进行ajax调用本身很简单。 这是javascript代码段

function pullResultFromServlet() {
  var url = 'servletURL';
  $.ajax({
    url: url,
    dataType: 'json',
    data:{
      "dateValue: $('#date').val(),
    },
    type: 'POST',
    success: function(responseFromServlet) {
      // further processing
      }


    },
    error: function(jqXHR, textStatus, errorThrown) {
    }
  });
}