SpringBoot Ajax 사용하기!

 

이전 포스팅 

AJAX 기초 수업 개념 정리!!

 

Spring Framework 에서 사용하는 Ajax 샘플 코드를 정리했다. 

 

흐름은 이렇다~~~~ 

1. html에서 Send 버튼을 클릭! 

2. 버튼 클릭 이번트 감지 function 실행

3. 보낼 데이터 준비 후  ajax url(/send)  로 전송~ 

4. @PostMapping(value = "/send") url 컨트롤러 매핑 

5. Controller 안에서 필요한 작업 수행~  

6. $.ajax 안의 success로 콜백 ~! 

7. error 발생 시 $.ajax 안 error 실행 

 

샘플코드로 확인하기! 

 

test.html 

<form id="testForm" method="post">
  이름 : <input type="text" name="name" id="name" value="genie"> <br/>
  나이 : <input type="text" name="age"  id="age" value="29"><br/>
  사는곳 : <input type="text" name="city" id="city" value="seoul"><br/>
  <button id="sendBtn">Send</button>
</form>

 

JS

 $(function() { 
   $("#sendBtn").click(function(e){
     e.preventDefault();


    /***********************
    * 기본 방식
    ************************/
    var form = {
    	name: "genie",
    	age: 29
    }

    $.ajax({
    	url: "/test/form",
    	type: "POST",
      	data: form,
      	success: function(data){
     	 	console.log(data);
      	},
      	error: function(){
          alert("error .. ");
        }
    });


    /***********************
    * form 으로 보내기 
    ************************/
    $.ajax({
      url: "/test/form",
      type: "POST",
      data: $("#testForm").serialize(),
      success: function(data){
     	 console.log(data);
      },
      error: function(){
      	alert("error .. ");
      }
    });





    /***********************
    * stringify 으로 보내기 
    ************************/
    var form2 = {
      name: "genie",
      age: 29
    }

    // 형태 변환 확인해보기 
    console.log(JSON.stringify(form2));  // print : {"name":"genie","age":29}

    console.log(JSON.stringify($('#testForm').serializeArray())); 
    // print : [{"name":"name","value":"genie"},{"name":"age","value":"29"},{"name":"city","value":"seoul"}]

    $.ajax({
      url: "/send",
      type: "POST",
      data: JSON.stringify(form),
      dataType: "json",
      contentType: "application/json; charset=utf-8;",
      success: function(data){
     	 console.log(data)
      },
      error: function(){
     	 alert("error .. ");
      }
    });

  });

});

 

VO

public class UserVO {
	private String name;
	private int age;
	
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public int getAge() {
		return age;
	}
	public void setAge(int age) {
		this.age = age;
	}
}

 

Controller

@Controller
public class HomeController {
	
	
    @PostMapping("/test/form")
    @ResponseBody
    public String test1(UserVO vo) {
    	
    	/**************************
    	 * vo 에 담긴 param 값 꺼내보기 
    	 **************************/
    	System.out.println("======================");
    	System.out.println("이름 : " + vo.getName());
    	System.out.println("나이 : " + vo.getAge());
    	System.out.println("======================");
    	
    	return "OK";
    }
    
    
    
    @PostMapping(value = "/send")
    public @ResponseBody Map<String, Object> send(@RequestBody Map<String, Object> param){
    	
    	/**************************
    	 * map에 담긴 param 값 꺼내보기 
    	 **************************/
    	System.out.println("======================");
    	System.out.println(param);
    	System.out.println("이름 : " + param.get("name"));
    	System.out.println("나이 : " + param.get("age"));
    	System.out.println("======================");

    	
    	/**************************
    	 * map에서 가져온값 VO에 담아보기 
    	 **************************/
    	UserVO user = new UserVO();
    	user.setName((String) param.get("name"));
    	user.setAge((int) param.get("age"));
    	
    	
    	/**************************
    	 * 객체를 리턴해보기 
    	 **************************/
    	Map<String, Object> res = new HashMap<>();
    	res.put("vo", user);
    	res.put("msg", "OK");
    	
    	
    	return res;
	}
    
}

 

 

끝!! 굳!!!!