Ajax　JSP→Java servlet 　WEBサーバからAPIのJava servletに接続、postができない

現在Ajaxの勉強のため簡単なWEBアプリを作成しています。
そのため、初歩的な内容でしたら申し訳ございません。

WEBサーバからAPIにAjaxとJavaServletを使いデータを転送し、
画面にレスポンスとしてJSONを表示したいのですが、
APIサーバに接続＆データのPOSTができません。

WEBサーバとAPIは同じローカルサーバ上にあるので
Ajaxで接続できないということはないので(簡単なhtmlを作り接続できることは確認済み)、
私のソースが間違っているのは分かるのですが、
どこが原因で接続できないのかわかりません。
2日間ぐらい調べて試したりしたのですが、解決できませんでした。

大雑把な質問で申し訳ないのですが、ご教授していただけると助かります。

追記
javaソースのprotected void doPost(HttpServletRequest...の部分をprotected → publicに変更したところコンソールでDataの内容は出力できましたが、Ajaxはfailのままでした。

console.log
1failのconsole.logの内容
2POST http://localhost:8080/API/Connect 404
3send @jquery.min.js:2
4ajax @jquery.min.js:2
5connect @ApiConnect.jsp:16
6onclick @ApiConnect.jsp:42

jsp
1<%@ page language="java" contentType="text/html; charset=UTF-8"
2    pageEncoding="UTF-8"%>
3<!DOCTYPE html>
4<html>
5<head>
6<meta charset="UTF-8">
7<title>接続</title>
8
9
10<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
11<script>
12var AppUrl = "/API/Connect";
13var Data = {DATA1:"1",DATA2:"2",DATA3:"3"};
14        function connect() {
15
16
17             $.ajax({
18             	url: AppUrl,
19                type:"post",
20                data: Data,
21             }).done(function(date){
22            	 Data1 = data["Data1"];
23            	 Data2 = data["Data2"];
24            	 Data3= data["Data3"];
25            	 console.log("接続成功");
26             })
27             .fail(function(XMLHttpRequest, textStatus, errorThrown){
28            	console.log("XMLHttpRequest : " + XMLHttpRequest.status);
29            	console.log("textStatus     : " + textStatus);
30            	console.log("errorThrown    : " + errorThrown.message);
31                console.log("失敗");
32             });
33        }
34
35</script>
36</head>
37<body>
38
39  <div>接続画面</div>
40
41  <input type="button" id = "btn"  value="接続" onclick="connect()">
42
43</body>
44</html>

JAVA
1import java.io.IOException;
2import java.io.PrintWriter;
3import java.util.HashMap;
4import java.util.Map;
5
6import javax.servlet.RequestDispatcher;
7import javax.servlet.ServletException;
8import javax.servlet.annotation.WebServlet;
9import javax.servlet.http.HttpServlet;
10import javax.servlet.http.HttpServletRequest;
11import javax.servlet.http.HttpServletResponse;
12
13import com.fasterxml.jackson.databind.ObjectMapper;
14
15/**
16 * Servlet implementation class Connect
17 */
18@WebServlet("/API/Connect")
19public class Connect extends HttpServlet {
20	private static final long serialVersionUID = 1L;
21
22    /**
23     * @see HttpServlet#HttpServlet()
24     */
25    public Connect() {
26        super();
27        // TODO Auto-generated constructor stub
28    }
29
30
31
32	/**
33	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
34	 */
35    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
36        // TODO Auto-generated method stub
37    	 RequestDispatcher dispatcher = request.getRequestDispatcher("http://localhost:8080/Web/WebContent/ApiConnect.jsp");
38         dispatcher.forward(request, response);
39
40
41         try {
42            request.setCharacterEncoding("utf-8");
43            String res1= request.getParameter("DATA1");
44     	    String res2 = request.getParameter("DATA2");
45     	    String res3 =  request.getParameter("DATA3");
46
47            Map<String, String> mapMsg = new HashMap<String, String>();
48
49            //追加
50            mapMsg.put("Data1", res1);
51            mapMsg.put("Data2", res2);
52            mapMsg.put("Data3", res3);
53
54            //マッパ(JSON <-> Map, List)
55            ObjectMapper mapper = new ObjectMapper();
56
57            //json文字列
58            String jsonStr = mapper.writeValueAsString(mapMsg);  //list, map
59
60            //ヘッダ設定
61            response.setContentType("application/json;charset=UTF-8");   //JSON形式, UTF-8
62
63            //pwオブジェクト
64            PrintWriter pw = response.getWriter();
65
66            pw.print(jsonStr);
67
68            //クローズ
69            pw.close();
70
71         } catch(Exception e) {
72             e.printStackTrace();
73         }
74
75
76    }
77}

m.ts10806

2021/05/21 07:17

起きてる問題は何ですか？「POSTできない」はどうやって確認されましたか？

handlehandle

2021/05/21 07:28

わかりづらくて申し訳ございません。起きてる問題としては、 ①Ajaxを行うとfailに入りデータを渡すことができない。 ②javaservlet側で受け取った値がNULLになっている　(変数名(DATA1、DATA2、DATA3)でコンソール出力で確認しました。)。 postできないに関してですが、正確にはpostできないではなく、受け取った値がNULLになっているでした。困惑させてしまい申し訳ございません。

m.ts10806

2021/05/21 07:35

failのコールバック引数を全てconsole.logにて出力して結果を質問本文に追記してください。

m.ts10806

2021/05/21 07:35

あと受け取った値の確認はどのようにしてますか？

handlehandle

2021/05/21 08:25

すみません。遅くなりました。 failのconsole.logの内容です。 POST http://localhost:8080/API/Connect 404 send @jquery.min.js:2 ajax @jquery.min.js:2 connect @ApiConnect.jsp:16 onclick @ApiConnect.jsp:42 受け取った値はeclipseのコンソール上で確認しています。

dodox86

2021/05/21 11:14

サーブレットに付与されているアノテーションが@WebServlet("/Connect")　で、AjaxでのPOST送信じのURLが"/API/Connect" ですが、これでいいのでしたっけ？

dodox86

2021/05/21 11:17

参考に、当方で採取してみたAjax部分でのPOSTメソッドのリクエストの内容を付記しておきます。(JSPからHTMLに変えて送信したものです）　これが想定通りのものであれば良いのですが。 POST /API/Connect HTTP/1.1 Host: localhost:8000 Connection: keep-alive Content-Length: 23 Accept: */* Content-Type: application/x-www-form-urlencoded; charset=UTF-8 X-Requested-With: XMLHttpRequest sec-ch-ua-mobile: ?0 User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36 sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="90", "Google Chrome";v="90" Origin: http://localhost:8000 Sec-Fetch-Site: same-origin Sec-Fetch-Mode: cors Sec-Fetch-Dest: empty Referer: http://localhost:8000/t1.html Accept-Encoding: gzip, deflate, br Accept-Language: ja-JP,ja;q=0.9,en-US;q=0.8,en;q=0.7 DATA1=1&DATA2=2&DATA3=3

handlehandle

2021/05/24 01:35 編集

すみません。回答遅くなりました。ありがとうございます。想定通りの内容です。現在、Dataの内容をコンソール出力で確認でき、AjaxのPOSTはできているようです。（結果はfailのままです）現状を整理するとAjax　→　JavaServletの通信(POST)はできているが、 POSTで受け取った後のレスポンス(POST内容をJSONで表示)ができてないということになるのでしょうか。おそらく下記の③、④の部分ができていないと考えているのですが ①Ajax → JavaServlet ②JavaServlet　→ 受けたった内容をJSON形式にする ③②のJSONをAjaxに返す。 ④Ajaxのsuccess部分でJSONを表示する。

dodox86

2021/05/24 01:49

[2021/05/21 20:14]のコメントを再掲： > サーブレットに付与されているアノテーションが@WebServlet("/Connect")　で、AjaxでのPOST送信じのURLが"/API/Connect" ですが、これでいいのでしたっけ？

handlehandle

2021/05/24 02:29

/Connectではなくて/API/Connectでした。 Eclipseでservletを作成した時に自動で設定されたままになっていました。質問本文のソース修正いたしました。