[Spring Boot] Ajax POST - $.post $.ajax 이용하기 (간단 예제)

Spring Boot에서  

$.post 와 $ajax 로 데이터 POST하는 방법을 알려드리겠습니다.

$.post로 하는 방법이 더 간단한데 정보가 많이 없더라고요.

 

 

 

 

$.get 방법은 아래 포스트를 참고해주세요.

chikaka-dev.tistory.com/39

[Spring boot] $.get 으로 DB select 출력

 

 

Controller와 Service, Mapper 등등은 저 포스트 내용에 이어서 적도록 하겠습니다.

같은 클래스에 추가해 주시면 됩니다.

 

 

데이터를 DB에 추가하는 insert로 예를 들어 보겠습니다.

 

 

 

 

Controller.java

	// 추가 (POST)
	@PostMapping(value = "/api/post") 
	public String insertRes(@RequestParam String resName) {

		service.insertRes(resName);

		return resName;
	}

※ 변수 resName 은 각자 코드에 맞게 post해 올 데이터를 변수로 지정해주면 됩니다.

 

TestMapper.java

void insertRes(String resName);

 

TestService.java

public void insertRes(String resName) {
		mapper.insertRes(resName);
	}

mapper-menu.xml

<!-- 생성 -->
	<insert id="insertRes"
		parameterType="com.mycompany.myapp.RestaurantVo">

		insert into res
		(res_name)
		values
		(#{resName})

	</insert>

index.html

 $(document).ready(function () {
         $("#saveBtn").on('click', function () {
            $.post("/api/post", {
               resName: $("#resName").val()
            });
         });
      });

  $(document).ready(function () {
         $("#saveBtn").on('click', function () {
             $.ajax({
               url: "/api/post",
               type: "POST",
               data: {
                  resName: $("#resName").val()
               }
               
            });
         });
      });

 

여기서 두가지 방법이 있는데 (위 두가지 중 선택하면 됩니다. 둘다 같은 내용)

1. $.post

2. $.ajax

 

 

만약 data만 넘기는것이 아니라 함수 부분도 추가하고 싶다면

 

 $(document).ready(function () {
         $("#saveBtn").on('click', function () {
            $.post("/api/post", {
               resName: $("#resName").val()
            },
            function(){
            	alert("성공");
            });
         });
      });

  $(document).ready(function () {
         $("#saveBtn").on('click', function () {
             $.ajax({
               url: "/api/post",
               type: "POST",
               data: {
                  resName: $("#resName").val()
               },
               success: function() {
               	  alert("성공");               
            });
         });
      });

 

이렇게 해주면 끝!

 

제일 주의할 점은

오타이다.

에러발생시 다 필요없고 오타 때문이라고 생각하면 된다..

특히 url 적는 부분! 주의해서 적어주자

그리고 데이터 넘길 때 변수부분도 주의해서 적어주자