Spring

[스프링 부트] - AJAX 요청 파라미터 전달

코린이 파닥거리기 2025. 4. 24. 00:06
728x90
반응형
SMALL

AJAX 요청으로 파라미터 전달하는법을 배웠다.

  • get :경로 뒤에 ?를 붙여서 데이터 전
  • post: FromData와 JSONData를 이용하여 데이터 전달 

Form으로 데이터를 Post로 제출하기

RegisterController.java

@Controller
public class RegisterController {

  @GetMapping("/register")
  public String showForm() {
    return "register";
  }

  @PostMapping("/register")
  @ResponseBody
  public String handleRegister(
    @RequestParam String name,
    @RequestParam String age,
    @RequestParam String email
  ) {
    // 문제: name, age, email 값을 받아 출력
    return String.format("이름: %s, 나이: %s, 이메일: %s", name,age, email);
  }

 

 

register.html

<!DOCTYPE html>
<html>
<head><title>Register</title></head>
<body>
<!-- 이름, 나이, 이메일을 입력받아 POST 방식으로 제출 -->
<form method = "post">
  이름: <input type="text" name = "name"><br>
  나이: <input type="number" name = "age" ><br>
  이메일: <input type="text" name = "email"><br>
  <button type="submit">제출</button>
</form>


</body>
</html>

AJAX시 두가지가 필요하다.

1.register페이지에 들어가기위한 GetMapping된 /register

2.register페이지에서 폼 제출을 위한 PostMapping된 /register

 

HTML폼에서 POST형식으로 받으면 PostMapping된 /register로 값을 전달해주는 것이다.

 

자 그럼 실제로 보자

이렇게 register페이지는 GetMapping이 되어 register를 리턴하고

리턴된 register String은 View에서 register.html을 찾아 웹 브라우저에 띄워준다.

이름 나이 이메일을 입력하고

제출버튼을 눌러보자

    return String.format("이름: %s, 나이: %s, 이메일: %s", name,age, email);

PostMapping의 리턴값 

이름     나이      이메일이 출력되는 것을 볼 수 있다.

※html의 name속성의 값들과 RequestController에서의 @RequestParam의 변수 이름과 정확하게 일치해야한다.

Form없이 Get으로 제출하기

register_ajax.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>회원가입</title>
  <script>
    async function submitForm() {
      // 이름, 나이, 이메일을 JSON으로 묶어 
      // '/register-ajax'로 POST 요청을 보내고
      // 결과를 받아 출력
      const url = "http://localhost:8080/register-ajax2";
       const res = await fetch(url + "?name=xx&age=00&email=tt");
       const data = await res.text();
       console.log(data);
    }
  </script>
</head>

<body>
  <h2>회원가입 (AJAX)</h2>
  이름: <input type="text"><br>
  나이: <input type="number"><br>
  이메일: <input type="text"><br>
  <button onclick="submitForm()">제출</button>
  <p id="result"></p>
</body>

</html>

 

RegisterController.java

 @GetMapping("/register-ajax")
  public String showForm2() {
    return "register_ajax";
  }

  @GetMapping("/register-ajax2")
  @ResponseBody
  public String registerAjax(
    // @RequestBody Map<String, Object> body
    @RequestParam String name,
    @RequestParam Integer age,
    @RequestParam String email
    ) {
    // 문제: JSON으로 전달받은 데이터를 그대로 응답
    System.out.println(name);
    System.out.println(age);
    System.out.println(email);
    Map<String, Object> response = new HashMap<>();

    return name + age + email;
  }
}

 

버튼을 클릭시 프론트에서 register-ajax2로 AJAX요청을 보낸다. 

그럼 컨트롤러의 /register-ajax2는 값을 받는다.

뭘로 받냐?

const res = await fetch(url + "?name=xx&age=00&email=tt");

우리가 Get방식으로 입력했던 url에 name과 age와 email을 받아서

콘솔에 출력해준다.

이렇게 xx와 0 tt가 출력되는 것을 볼 수 있다.

Form없이 Post로 제출하기(Form Data)

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>회원가입</title>
  <script>
    async function submitForm() {
      // 이름, 나이, 이메일을 JSON으로 묶어 
      // '/register-ajax'로 POST 요청을 보내고
      // 결과를 받아 출력
      // Post요청 시 body 속성과 FormData 반드시 사용
      const formData = new FormData();
      formData.append("name", "xx");
      formData.append("age", 30);
      formData.append("email", "tt");
      const url = "http://localhost:8080/register-ajax2";
       const res = await fetch(url , {
        method : 'post',
        body: formData //form data 전송
       });
       const data = await res.text();
       console.log(data);
    }
  </script>
</head>

<body>
  <h2>회원가입 (AJAX)</h2>
  이름: <input type="text"><br>
  나이: <input type="number"><br>
  이메일: <input type="text"><br>
  <button onclick="submitForm()">제출</button>
  <p id="result"></p>
</body>

</html>

Post로 요청시

 const formData = new FormData();
      formData.append("name", "xx");
      formData.append("age", 30);
      formData.append("email", "tt");
      const url = "http://localhost:8080/register-ajax2";
       const res = await fetch(url , {
        method : 'post',
        body: formData //form data 전송
       });

이 구문은 외워서 가는 것이다.

FormData객체를 생성하고 formData에 값들을 넣어준다.

method: 'post'형식으로 지정해주고,

body: 는 formData로 전송해준다.

그리고 RegisterController에는 Post로만 바꿔주면 끝이난다.

그럼 제출 시

웹 콘솔창
vsCode콘솔창

잘 뜨는 것을 확인할 수 있다.

Form없이 Post로 제출하기(JSON Data)

register-ajax.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>회원가입</title>
  <script>
    async function submitForm() {
      // 이름, 나이, 이메일을 JSON으로 묶어 
      // '/register-ajax'로 POST 요청을 보내고
      // 결과를 받아 출력
      // Post요청 시 body 속성과 FormData 반드시 사용
      const obj = {"name": "xx", 
      "age": 30, 
      "email": "ttt"};

      const url = "http://localhost:8080/register-ajax2";
       const res = await fetch(url , {
        method : 'post',
        headers:{
        "content-type": 'application/json'},
        body: JSON.stringify(obj) //form data 전송
       });
       const data = await res.text();
       console.log(data);
    }
  </script>
</head>

<body>
  <h2>회원가입 (AJAX)</h2>
  이름: <input type="text"><br>
  나이: <input type="number"><br>
  이메일: <input type="text"><br>
  <button onclick="submitForm()">제출</button>
  <p id="result"></p>
</body>

</html>

RegisterController.java

  @PostMapping("/register-ajax2")
  @ResponseBody
  public String registerAjax(
    @RequestBody Map<String, Object> body
    ) {
    // 문제: JSON으로 전달받은 데이터를 그대로 응답

    Map<String, Object> response = new HashMap<>();

    return body.toString();
  }
}

js에서는 컨텐트 타입을 'application.json'으로 변경해주고

obj를 JSON으로 변환 시켜주는 stringify함수를 사용하여 body로 데이터를 보낸다.

그럼 컨트롤러는 JSON데이터를 받았으니 RequestParam을 사용하면 안되고 

RequestBody를 사용해서 데이터를 받아야한다.

이렇게 제출버튼 클릭시 데이터가 잘 전달되는 것을 볼 수 있다.

 

실제 입력한 데이터가 전달되게 하기

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>회원가입</title>
  <script>
    async function submitForm() {
      // 이름, 나이, 이메일을 JSON으로 묶어 
      // '/register-ajax'로 POST 요청을 보내고
      // 결과를 받아 출력
      // Post요청 시 body 속성과 FormData 반드시 사용
      const name = document.querySelector('#name');
      const age = document.querySelector('#age');
      const email = document.querySelector('#email');
      
      const obj = {"name": name.value, 
      "age": age.value, 
      "email": email.value};
      const url = "http://localhost:8080/register-ajax2";
       const res = await fetch(url , {
        method : 'post',
        headers:{
        "content-type": 'application/json'},
        body: JSON.stringify(obj) //form data 전송
       });
       const data = await res.text();
       console.log(data);
    }
  </script>
</head>

<body>
  <h2>회원가입 (AJAX)</h2>
  이름: <input type="text" id = "name"><br>
  나이: <input type="number" id = "age"><br>
  이메일: <input type="text" id = "email"><br>
  <button onclick="submitForm()">제출</button>
  <p id="result"></p>
</body>

</html>

input타입 id속성에 이름을 붙여준다.

그럼 QuerySelector를 이용하여 name과 age email값을 변수에 저장해서

스프링에 백엔드로 보내준다.

 

 

728x90
반응형
LIST