Spring)Jsonデータ通信

Springを勉強しているうちに、Formを使って送る以外に、JavaScriptからSpringにデータを送る方法も知りたいです.
Httpリクエスト
1.Getリクエスト

非Bodyアドレスの形式

キー=値タイプ

DBはselect文

を含む.
2.Post、Put、Deleteのリクエスト

は、

の形式でhttp bodyにデータを送信する

データを変更する場合は

を使用します.

オンデマンドクエリ文

Postリクエスト:insert

Putリクエスト:update

Deleteリクエスト:delete

->formタグはGet、Postのみ使用できません
3.解決方法

JavaScript要求ajax+データをjson

に統一する
スプリングコントローラのパーティションポリシー
Key=value形式データ

getリクエスト:key=valueタイプ

POST要求(フォームタグPOST経由):(x-www-form-urlencoded)->キー=値形式

.
1.スプリングコントローラはkey=valueデータを自動的にスライスして変数に入れます.

// ex. {username = dokun , email = [email protected]}
//@GetMapping
@PostMapping
public String home(String username,String email){ // key와 value가 매핑된다
	System.out.println(username); // dokun
        System.out.println(email); // [email protected]
	return "home";
}

2.key=value形式のデータをobject受信に分けることもできます.

DTO

@Setter // setter가 없으면 object로 파싱이 불가능하다.
@Getter
class User {
	private String username;
    	private String email;
   	private String age;
}

Controller

@PostMapping
public String home(User user){ // User object로 데이터를 받는다.
	System.out.println(user.getUsername); // dokun
        System.out.println(user.getEmail); // [email protected]
        System.out.println(user.getAge); // null -> 값이 없으면 null로 받아진다.
	return "home";
}

key=value以外のデータ
@RequestBodyの使用

jsonデータの場合、key=valueではないため、Jacksonライブラリの@RequestBody構文を使用してjavaオブジェクトに分割されます.

json形式データ

{
	"username":"dokun",
        "email":"[email protected]"
}

Controller

PostMapping("/home")
public String home(@RequestBody User user){
	System.out.println(user.getUsername); // dokun
        System.out.println(user.getEmail); // [email protected]
    return "home";
}

formタグを使用してjsonデータを要求する(ajax)

join.html

<div class="container">

	<form>
		<div class="form-group">
			<label for="username">유저네임</label> 
			<input type="text" id="username">
		</div>
	
		<div class="form-group">
			<label for="email">이메일</label> 
			<input type="email" id="email">
		</div>
	</form>

	<button id="join--submit" class="btn btn-primary">회원가입</button>

</div>

<script src="/js/join.js"></script>

join.js

$('#join--submit').on('click', function() {
	let data = {
		username : $('#username').val(),
		password : $('#password').val(),
		email : $('#email').val()
	};

	$.ajax({
		type : 'POST',
		url : '/user/join',
		data : JSON.stringify(data),
		contentType : 'application/json; charset=utf-8',
		dataType : 'json'
	}).done(function(r) {
		if (r.statusCode == 200) {
			console.log(r);
			alert('회원가입 성공');
			location.href = '/user/login';
		} else {
			if (r.msg == '아이디중복') {
				console.log(r);
				alert('아이디가 중복되었습니다.');
			} else {
				console.log(r);
				alert('회원가입 실패');
			}
		}
	}).fail(function(r) {
		var message = JSON.parse(r.responseText);
		console.log((message));
		alert('서버 오류');
	});
});

reference : https://getinthere.tistory.com/