如何从 java servlet 发送数组 JSON 以使用 fetch() 响应前端？

Question

我一直在开发 React 应用程序。在此应用程序中，我会将用户的输入发送到 tomcat 服务器上的 Java servlet 以对其进行排序。排序后，我试图将其显示在我的 React 应用程序的标签上。我已经使用 fetch method() 成功地将它发送到 java servlet 并对其进行了排序。

这是我的 fetch() 方法的样子：

 const [text, setText] = useState("");
  async function onSubmit() {
 
    var newText = { text: text}; //object
      await fetch(`http://localhost:8080/backend/link`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "Access-Control-Allow-Origin" : "*",
 "Access-Control-Allow-Credentials" : true,
 "status" : 200
        },
        body: JSON.stringify(newText),
        mode: 'no-cors',
      })
        .then((response) => {
        console.log("response");
        console.log(response.body); //displays null
        })
        .then((data) => {
        console.log(data);
          console.log("Success");
        });
    }

我的 Java servlet 如下所示：

public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException
{
System.out.println("invoked");
String jsonBody = new BufferedReader(new InputStreamReader(request.getInputStream())).lines().collect(
           Collectors.joining("\n"));
System.out.println(jsonBody);
if (jsonBody == null || jsonBody.trim().length() == 0) {
       return;
   }
   JSONObject jObj;
try {
jObj = new JSONObject(jsonBody);
String lines[] = ((String) jObj.get("text")).split(","); //The words in the input are separated by comma
Arrays.sort(lines);
for (String a : lines)
           System.out.println(a);

response.setContentType("application/json");
   response.setCharacterEncoding("UTF-8");
   
} catch (JSONException e) {
System.out.print("Exception");
}
}

无论我在响应对象（使用 Printwriter）中发送什么，获取的响应主体都是空的。如何发送数组，以便我可以在 fetch 的响应对象中获取它，然后将其显示在标签中？

请留下您的建议

Answer 1

我没看到你在 servlet 响应中的什么地方写正文。

也许你需要这样的东西：

final PrintWriter writer = response.getWriter();
for (String a : lines)
           writer.println(a);

注意：您的客户希望返回一个 JSON 对象，因此您可能希望将 jObj 写入输出而不是文本行。

使用 google chrome 调试您的网络请求 view response headers。在那里你可以看到响应的主体。我的猜测是您的客户端代码没有问题，服务器没有在正文中发送任何内容。

Answer 2

从您的代码中不清楚您是如何使用 PrintWriter 的。您可以尝试如下操作，然后检查响应：

String message = new ArrayList<String>();
PrintWriter writer = response.getWriter();
JSONObject obj = new JSONObject();
obj.put("message",message); 
response.setStatus(200);
writer.append(obj.toString());
writer.close();

在JSON 对象上放置一个字符串消息以检查是否没有传递任何内容或仅没有传递响应。调用“response.message”在客户端获取消息。

Answer 3

这是因为我在客户端使用了“no-cors”模式，这意味着 JavaScript 无法访问结果响应的属性。这是关于它的详细解释：。我在客户端和服务器端做了一些修改，包括将内容类型从 application/json 更改为 text/plain，因为 json 格式不属于允许的类型之一。

The only allowed values for the Content-Type header are:

application/x-www-form-urlencoded
multipart/form-data
text/plain

现在我的客户端代码如下所示：

    var newText = { text: text, commands: new_list.join(), reg: reg };

      await fetch(`http://localhost:8080/backend/link`, {
        method: "POST",
        headers: {
          "Content-Type": "text/plain",
          "Origin" : "http://localhost:3000/",
        },
        body: JSON.stringify(newText),
      })
        .then((response) => response.text())
        .then((data) => {
          //console.log("Success");
          //console.log(typeof data);
          setRes(regex(data));
        });
  }

（我根据自己的要求添加了几个变量）

我从服务器端发回一个字符串形式的数组。我正在回答我自己的问题，因为将来有人可能会觉得有帮助。如果您有任何疑问，请在评论中告诉我。

如何从 java servlet 发送数组 JSON 以使用 fetch() 响应前端？

How to send an array as JSON from java servlet to react frontend using fetch()?

java

reactjs

tomcat

servlets