Jquery 和 servlet 与 ajax 通信答案

【问题标题】：Jquery and servlet communication with ajaxJquery 和 servlet 与 ajax 通信
【发布时间】：2015-07-29 20:15:00
【问题描述】：

我想在 tomcat 中建立一个 Jquery 函数和一个 servlet 之间的通信。

Servlet 代码：

import java.io.BufferedReader;
import java.io.File;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;



public class Test extends HttpServlet {
public static String getBody(HttpServletRequest request) throws IOException {

    String body = null;
    StringBuilder stringBuilder = new StringBuilder();
    BufferedReader bufferedReader = null;

    try {
        InputStream inputStream = request.getInputStream();
        if (inputStream != null) {
            bufferedReader = new BufferedReader(new InputStreamReader(inputStream));
            char[] charBuffer = new char[128];
            int bytesRead = -1;
            while ((bytesRead = bufferedReader.read(charBuffer)) > 0) {
                stringBuilder.append(charBuffer, 0, bytesRead);
            }
        } else {
            stringBuilder.append("");
        }
    } catch (IOException ex) {
        throw ex;
    } finally {
        if (bufferedReader != null) {
            try {
                bufferedReader.close();
            } catch (IOException ex) {
                throw ex;
            }
        }
    }
    body = stringBuilder.toString();
    return body;
}
  public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {

        response.setContentType("text/html");
        PrintWriter out = response.getWriter();
        System.out.println(getBody(request));
        out.println("Success Call Ajax POST");

      }
    public void doGet( HttpServletRequest request, HttpServletResponse
        response ) throws ServletException, IOException{
    response.setContentType("text/html");
    response.setCharacterEncoding( "UTF-8" );
    PrintWriter out = response.getWriter();
    out.println("Get Method");

  }

}

servlet 标识在 web.xml 中定义

web.xml：

<?xml version="1.0" encoding="UTF-8"?>
<web-app
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
version="3.0">
  <servlet>
    <servlet-name>Test</servlet-name>
    <servlet-class>com.servlets.Test</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>Test</servlet-name>
    <url-pattern>/toto</url-pattern>
  </servlet-mapping>
</web-app>

以下 HTML 包含 JQuery 函数：

jQuery 代码：

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    function login(){  

      $.ajax({  
        type: "POST",  
        url: "http://localhost:8080/test/toto",  
        data: "POST Call",
        success: function(result){  
          alert("success call"+result);
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) { 
            alert("Status: " + textStatus); alert("Error: " + errorThrown); 
        }                 
      });  
    }        
    </script>
    <title>My AJAX</title>
</head>
<body>
    <button type="button" onclick="login()">Click Me!</button>
</body>

我用浏览器测试了servlet，没问题。当我尝试 HTML/js 应用程序并单击按钮时，我在 Eclipse 控制台中显示了指令 System.out.println(getBody(request)); 显示的消息。 “POST Call”，但我在浏览器中收到了错误警报。所以ajax函数成功调用了servlet中的post方法，但是servlet不能成功地向浏览器返回响应。 servlet 似乎有问题。有人可以帮帮我吗？

【问题讨论】：

如果显示 'POST Call' ，则 ajax 中的 data: "POST Call", 可能存在问题。如果您使用的是 chrome 浏览器，请检查网络选项卡的响应和标题。
我尝试使用 firefox 和 chrome 并收到相同的错误警报。但是在 chrome 中，当我单击按钮时，我也收到了此错误消息：XMLHttpRequest cannot load localhost:8080/test/toto。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问 Origin 'null'。
您是否使用 iframe 加载 servlet？\
不，我不使用 iframe 加载
在doPost() 中尝试添加请求标头：response.setContentType("text/html"); response.setHeader("Access-Control-Allow-Origin", "*"); 有什么不同吗？

标签： java javascript jquery ajax servlets

【解决方案1】：

在doPost()尝试添加请求头：

response.setContentType("text/html"); 
response.setHeader("Access-Control-Allow-Origin", "*");

我确定这与here 描述的允许来源问题有关

【讨论】：

【解决方案2】：

它是特定于浏览器的。

它在 Safari 8.0.3 上运行良好，但在 Chrome 和 Firefox 上会抛出错误 No 'Access-Control-Allow-Origin' header is present。

在 Firefox 中查看控制台：

跨域请求被阻止：同源策略不允许读取位于http://localhost:8080/toto 的远程资源。这可以通过将资源移动到同一域或启用 CORS 来解决。

可以通过在浏览器中禁用web security 或如前所述来修复：

response.setHeader("Access-Control-Allow-Origin", your_domain);

【讨论】：