Post로 사용하여 값 전송하기

---

 

PostMapping으로 값 전송하기

 

---

 

1. js에서 submit 하기

 

1-1) html에서 함수를 실행할 버튼 혹은 링크를 만든다.

<!-- html -->
<input type="password" id="unBPw" name="b_pw" class="input" placeholder="비밀번호 입력" maxlength="20"> <br>
<button type="button" class="crudBtn" th:onclick="unUD([[${bDto.b_num}]],'U')">수정</button>
<button type="button" class="crudBtn" th:onclick="unUD([[${bDto.b_num}]],'D')">삭제</button>

<a href="javascript:'함수명'('매개변수')">js링크</a> 이런 식으로 a 태그를 통해 js 함수 호출도 가능하다고 한다.

 

1-2) js에서 함수 생성

<!-- js -->
function unUD(num,UD){
    let form = document.createElement('form');	// form 태그 생성
    let input;
    input = document.createElement('input');	// input 태그 생성
    input.setAttribute('type', 'hidden');	// input 태그의 타입을 hidden으로 설정
    input.setAttribute('name', 'b_num');	// input 태그의 name 설정
    input.setAttribute('value', num);	// input 태그의 값 설정
    if(UD=="U"){
        form.setAttribute('action', '/board/boardUpdate');
    }else if(UD=="D"){
        form.setAttribute('action', '/board/boardDelete');
    }
    form.appendChild(input);	// input 태그를 form 태그 안에 종속
    form.setAttribute('method', 'post');	// PostMapping
    document.body.appendChild(form);	// body에 form 태그 종속
    form.submit();	// form submit
}

* 작업하던 것이라서 js 함수에서 비밀번호 확인하는 ajax도 있고 그랬는데 나중에 보면서 헷갈릴 것 같아서 제외했다.

 

---

 

2. html에서 submit 하기 (+ 버튼에 formaction 넣어서 url 다르게 보내기)

 

<form method="post">
	<input type="hidden" th:value="${bDto.b_num}">
	<button type="submit" class="crudBtn" formaction="/board/boardUpdate">수정</button>
	<button type="submit" class="crudBtn" formaction="/board/boardDelete">삭제</button>
</form>

 

 

---