서버로 데이터 전송하기 - JS

11 Nov 2020 in Web Dev on Java Spring

◇ JSP~서버 데이터 전송 포스팅 시리즈 ◇

1. JSP에서 서버로 데이터 전송 - intro
2. JSP에서 서버로 데이터 전송 - HTML
3. JSP에서 서버로 데이터 전송 - JS - 현재 글
4. 서버에서 JSP로 데이터 전송

4. input button으로 전송 : location.href 에 접근해 전달
5. submit으로 전송 : 변수에 담아 전달

4번 방법: JS로 정보 넘기기 - button

<input id="btn" type="button" value="데이터 전송" ><br>
<p>${userid}, ${hobby}</p>

• 버튼을 누르면 javascript에서 서버에 정보를 넘기는 코드가 실행된다.

• location 은 주소창 객체를 의미한다. 이 주소창 객체의 href 속성에 직접 값을 줘서 넘긴다.

  location.href = "send4?userid=asdf&hobby=Cooking";
  

• 다음과 같은 코드.

window.onload = function() {
    document.getElementById("btn").onclick = function() {
        var userid = "asdf";
        var hobby =  "Cooking";
        if(confirm("데이터를 전송하시겠습니까?")) {
            location.href = "send4?userid="+ userid +"&hobby=" + hobby;
            alert("전송완료");
        }
    };

@RequestMapping(value="/send4", method=RequestMethod.GET)
public String send4(String userid, String hobby, Model model) {
    model.addAttribute("userid", userid);
    model.addAttribute("hobby", hobby);
    return "index";
}

5번 방법: input submit으로 정보 넘기기

• type= submit으로 한 경우 button과는 다르게 location.href에 직접 정보를 넘기지 않아도 된다.
• 일단 화면은 다음과 같다.

<form action="send5" method="GET">
    <label for="userid">아이디 : <input type="text" id="userid" name="userid" ></label><br>
    <label for="hobby">취 미 : <input type="text" id="hobby" name="hobby"></label><br>
    <input id="btn5" type="submit" value="전송">
</form>

• submit 타입 버튼에 onclick을 걸어서 아래와 같이 전송을 취소할 수도 있다. return false
• form 안 input의 name과 value 의 정보가 Controller로 자동으로 넘어간다.(분명 복잡한 일이 일어나겠지만 그것은 나중에 더 공부하면서 알아보도록 한다.)

window.onload = function() {
    document.getElementById("btn5").onclick = function() {
        if(confirm("데이터를 전송할까요?")) {
            alert("전송 완료");
            return true; // submit을 하라는 의미 (input type="submit" 동작을 계속 하라는 의미)
        }
        alert("전송 취소");
        return false; // submit을 하지 말라는 의미

    };
};

• jsp 파일에서의 form 안 input의 name과 value 의 정보와 대응되는 이름을 param에 넣어주면 스프링이 알아서 받아준다.

@RequestMapping(value="/send5",method= RequestMethod.GET)
public String send5(String userid, String hobby,Model model) {
    model.addAttribute("userid",userid);
    model.addAttribute("hobby",hobby);
    return "index";
}