ECサイト構築　商品マスタから商品を削除する機能について(ajaxを使用して)

前提・実現したいこと

掲題の件についてお伺いいたします。
現在簡易的なECサイトの構築しています。
商品マスタを作成➡商品を削除する機能を作成したのですが、ブラウザでconsoleエラーが発生しました。
最終的には、該当商品の作成ボタンをクリック➡アラートを表示させる➡アラートをok➡一覧から商品が削除された状態にしたいと考えております。
お手数ですが、ご教示いただけますと幸いです。
※html内のbodyは省略しております。

発生している問題・エラーメッセージ

Uncaught SyntaxError: Unexpected identifier  welcome:22

該当のソースコード

【welcome.html】

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<link href="/css/style.css" th:href="@{/css/style.css}" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(() => {
	$('.deleteBtn').on('click', (event) => {
		event.preventDefault();
		let tdList = $(event.target).parent().parent().find('id');
		
		let id = $(tdList[0]).text();
		let jsonString = {
				'id': id,
				'goodsName': $(tdList[1]).text(),
				'price': ''
		};
		
		$.ajax({
			type: 'POST'
			url: '/ecsite/admin/api/deleteGoods',  <= こちらが該当するエラーです。
			date: JSON.stringify(jsonString),
			contentType: 'application/json',
			acriptCharset: 'utf-8'
		})
		
		.then((result) => {
			console.log(result);
			alert(`商品 [ ${jsonString.goodsName} ] を削除しました。`);
			$(tdList).parent().remove();
		}, () => {
			console.error('Error: ajax connection failed.');
			
			}
		);
	});
});
</script>
<title>ECサイト</title>
</head>
<body>

<header>
	<h1>My EC Site</h1>
</header>
<body>
...............
</body>
</html>

AdminController.java

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.ResponseBody;
	@ResponseBody
	@PostMapping("/api/deleteGoods")
	public String deleteApi(@RequestBody GoodsForm f, Model m) {
		try {
			goodsRepos.deleteById(f.getId());
		} catch (IllegalArgumentException e) {
			return "-1";
		}
		return "1";
	}

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答2件

javascript
1type: 'POST'
2url: '/ecsite/admin/api/deleteGoods',

type: 'POST'の後ろにカンマがないですね。

投稿2020/05/25 03:33

KoichiSugiyama

総合スコア3041

退会済みユーザー

2020/05/25 04:00

> KoichiSugiyama 様ご回答ありがとうございます。，気づきませんでした。今後も注意しないとですね。

行動規範の内容に同意します

ベストアンサー

date: JSON.stringify(jsonString),

「data」ですね。
あと、stringifyしてしまうと、１つの文字列になるのですけど、GoodsFormの定義と合ってますか？

投稿2020/05/25 03:38

m.ts10806

総合スコア80861

退会済みユーザー

2020/05/25 04:03

> m.ts10806様ご回答ありがとうございます。綴りですね！気をつけます。

退会済みユーザー

2020/05/25 04:34

それは恐らくGoodsForm.javaのことだと思いますが、テキスト通り写経していますので、定義は問題ないかとおもいます。

退会済みユーザー

2020/05/25 04:43

度々すみません。お二方のご指摘をいただいたものを修正しましたが、別のエラーが発生いたしました。ブラウザconsole表示は以下です。 Failed to load resource: the server responded with a status of 500 ()　api/deleteGoods:1 Error: ajax connection failed.　welcome:33

m.ts10806

2020/05/25 04:50

「写経してるから問題ない」は大問題です。定義と参照の整合性が合っているかは必ず自身で確認する必要があります。stringifyすることで文字列になるので、パラメータのキーがなくなるのではないか？ということを指摘しています。 parseしたものを渡すのならわかるのですが、来るのは文字列です。通常、ajaxでdataを送る場合はオブジェクトで送ります。

KoichiSugiyama

2020/05/25 04:53

ステータス500はサーバの内部処理エラーなので、サーバ側の処理に問題があったということですね。サーバ側でもエラーを返せない状態になっている(例外発生など)ので、サーバのログ等を見て何が起こっているか調べるしかないと思います。

退会済みユーザー

2020/05/25 05:09

> m.ts10806様おっしゃることはごもっともです。その認識は間違っておりました。反省いたします。

退会済みユーザー

2020/05/25 05:14

>KoichiSugiyama様ありがとうございます。 500はサーバーのエラーですか！大変勉強になります。先ほどログ等の確認しましたところ、エラーの原因がわかりました。無事に、処理ができましたのでご報告をさせていただきます。お忙しい中ご教示頂いき感謝いたします。

m.ts10806

2020/05/25 19:58

「エラーの原因が分かりました」以後、結局どのように解決とされたのでしょうか