POST通信した際にパラメータの受け渡しができない

Question

POSTで通信をしようとしているのですが、
サーバー側でパラメータを受け取れないです。

私の勉強不足なのですが、原因がわからないです。
内容をご確認いただけないでしょうか。

	@ResponseBody
	@RequestMapping(value = "/testAPI", method = RequestMethod.POST)
	public void updateInsurance(HttpServletRequest request, HttpServletResponse response) throws IOException{
		
		// 処理①
		logger.info("変数request.getParameter(\"fileName\")：" + request.getParameter("fileName"));
		
	    Enumeration names = request.getParameterNames();
	    while (names.hasMoreElements()){
	      String name = (String)names.nextElement();
	      // 処理②
	      logger.info("パラメータ：" + name);  
	    }
	}

function doPost(){
	var param = {
		"fileName": encodeURIComponent(fileName)
	};

    var xhr = new XMLHttpRequest();
    xhr.open('POST', './API/testAPI', true);
    xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
    xhr.responseType = 'arraybuffer';
    xhr.onload = function(e) {
    	// 処理③
    	alert(this.status);
    }

    xhr.send(JSON.stringify(param));
}

処理①の出力結果は、「 変数request.getParameter("fileName")：null」
処理②は、何も出力されません。（ログ自体出力されないです）
また、処理③の結果は「200」のためサーバーとの通信はできているようです。

想定結果としては、処理①の出力結果にfileNameが出力されると思っているのですが、
上記に記載した通り「null」が出力されてしまっています。

サーバー側の受け取り方、クライアント側の渡し方、どちらが悪いのでしょうか。
それとも、両方でしょうか。。。

Comments

[yambejp]

fileNameはどこから湧いて出たのでしょうか？

[yamaki]

質問するためにコードを書き換えた際にfileNameをわすれてしまいました。
以下のようにdoPostメソッドのパラメータで受け取ります。
doPost(fileName){処理}

Answer 1

JSON 形式で POSTしたものは JSON形式でしか受け取れません。

Request#getParameter は基本的に key=value&.. 形式のみです。

java側を正とするなら javascript がダメだし
javascript側を正とするならjava側がダメ

統一しましょう。

JSON方式の記事

Answer 2

javaはわからないので、クライアント側だけ
こんな流れでどうでしょう？

Comments

[yambejp]

const url="./API/testAPI";
const fileName="hogehoge";
const obj = {fileName};
const method = "POST";
const body = Object.entries(obj).reduce((o,ele)=>(o.set(ele[0], ele[1]), o), new FormData());
fetch(url, {method, body}).then(res=>res.text()).then(console.log).catch(console.error);

[yamaki]

yambejpさん、回答ありがとうございます。
いただいたコードで試してみたのですが、結果は変わらずサーバー側で値は取れていないようでした。

fetchについて調べて、以下のようなコードも試してみたのですが、こちらもサーバー側に値を渡せていませんでした。
const url="./API/testAPI";
const fileName="hogehoge";
const method = "POST";
fetch('./API/testAPI', {
method: 'POST',
body: fileName,
})
.then(function (response) {
return response.text();
})
.then(console.log)