프로젝트 17일차 / fetch put 회원정보수정 시 백으로 데이터가 넘어오지 않는 현상 (ajax로 해결)

현재 맞닥뜨린 문제

 

회원 정보 수정폼을 열어서 

폼에 입력한 값을 프론트 -> 백으로 전달->DB에 업데이트를 해야 하는데

 

프론트 -> 백 사이에 문제가 있다.

 

 

 

수정폼을 넘기면 프론트에서 넘어갈 때에는 console 창에 값이 잘 찍히는데 

백에 도착해서는 전부 null 값으로 찍힌다

 

 

 

 

 

이 문제를 하루나 붙잡고 있었는데 해결이 딱히 안되고 있다...

fetch post 로 하고 있었는데 그냥 ajax로 변경할까 생각도 들고..

 

 

 

백 MemberApiController

 

	/******************************** 회원정보수정 실행 ********************************/
	@ApiOperation(value = "회원 정보 수정")
	@PutMapping(value="/modify/{mC}")
	public ResponseDto ModifyOne (@PathVariable(value = "mC") String mC, 
				      @RequestBody MemberModifyDto memberModifyDto) {
				
		log.info("프론트에서 넘어온 수정할 정보↓");
		log.info(memberModifyDto.toString());
		
		//memberDto.getMember_name()으로 update SQL문 실행하기
		int result = memberService.modifyOne(memberModifyDto);
		ResponseDto responseResult = new ResponseDto(memberModifyDto.getMember_code()+" 수정 완료", result);
		
		log.info("mC: "+mC);
		log.info("responseResult: "+responseResult);
		
		return responseResult;
		
	}

 

 

 

 

프론트 doModifyForm 함수

 

   /********************* 회원정보수정 폼 *********************/

    function doModifyForm(member_code) {

        var member_code = document.getElementById("memberCode").value;
        var url = "http://localhost/api/member/modifyForm/"

        fetch(url+member_code, {
            method: "GET",
            mode:'cors',
            headers: {
                'Content-Type' : 'application/json',
            }
        })

        .then(response => response.json())
        .then(response => {

            var memKeys = Object.keys(response.data);
            var memValues = Object.values(response.data);

            console.log(memValues[0]);

            var data =
            /* <form action="javascript: doModify(${memValues[0]})" id="frmData"> */
                // <input type="hidden" name="_method" value="PUT"/>
            `
            <form method="put" id="frmData">
            회원코드 : <input type="text" id="member_code" name="member_code" value="${memValues[0]}" readOnly><br>
            이름 : <input type="text" id="member_name" name="member_name" value="${memValues[1]}"><br>
            핸드폰 : <input type="text" id="mobile_no" name="mobile_no" value="${memValues[2]}"><br>
            주소 : <input type="text" id="address" name="address" value="${memValues[3]}"><br>
            나이 : <input type="text" id="age" name="age" value="${memValues[4]}"><br>
            성별 : <input type="text" id="sex" name="sex" value="${memValues[5]}"><br>
            비밀번호 : <input type="text" id="password" name="password" value="${memValues[7]}"><br><br>
            <button type="button" onClick="doModify()"> 수정 </button>
            </form>
            `

            document.getElementById("modifyFormArea").innerHTML = data;
            
        })
        .catch (error => {
            console.log(error);
            alert(error);
            alert("에러입니다");
        })

    }

 

 

 

 

 

프론트 doModify 함수

 

    /********************* 회원정보수정 실행 *********************/
    function doModify() {
        
        var member_code = document.getElementById("member_code").value;
        var member_name = document.getElementById("member_name").value;
        var mobile_no = document.getElementById("mobile_no").value;
        var address = document.getElementById("address").value;
        var age = document.getElementById("age").value;
        var sex = document.getElementById("sex").value;
        var password = document.getElementById("memberCode").value;
        
        console.log(member_code);
        console.log(member_name);

        var url = "http://localhost/api/member/modify/";
        var data1 = $("#frmData").serialize();
        alert(data1);
        // JSON.stringify({
            //     "member_code" : member_code, 
            //     "member_name" : member_name,
            //     "mobile_no" : mobile_no,
            //     "address" : address,
            //     "age" : 10,
            //     "sex" : sex,
            //     "password" : password
            // })
        fetch(url+member_code, {
            method: "PUT",
            // mode:'cors',
            headers: {
                // 'Content-Type' : 'application/json',
            },
            body: data1
        })
        
        .then(response => response.json())
        .then((data) => {
            console.log(data);
        })
        .catch(error => {
            console.log("에러입니다");
            alert(error);
        })
    }

 

 

 

---

 

 

 

fetch 말고 ajax로 해결했다

백은 @PutMapping만 @PostMapping으로 고쳤다.

 

기존에 백에서 사용하던 @PutMapping에 맞춰서 ajax함수의 타입을 put으로 설정했는데 이건 오류가 났다.

ajax의 타입은 Post, 백의 어노테이션은 @PostMapping.

 

fetch로 하루를 붙들고 있었는데

ajax로 고치자마자 바로 해결되어서 얼떨떨하다.. 이럴수가

 

   /********************* 회원정보수정 실행 *********************/
    function doModify() {
        
        var member_code = document.getElementById("member_code").value;
        var member_name = document.getElementById("member_name").value;
        var mobile_no = document.getElementById("mobile_no").value;
        var address = document.getElementById("address").value;
        var age = document.getElementById("age").value;
        var sex = document.getElementById("sex").value;
        var password = document.getElementById("memberCode").value;
        
        console.log(member_code);
        console.log(member_name);

        var url1 = "http://localhost/api/member/modify/";
        var data1 = $("#frmData").serialize();

        $(function() {
        
            $.ajax({
                type : "post",
                url : url1 + member_code,
                data : data1,
                success : function(result) {
                    alert(result);
                    alert("회원정보수정 완료!");
                }
            }); // ajax end
            
        }); // jQuery function end

    }