CodeHoon

안녕하세요 상훈입니다.

✔ 에러 환경 / 내용

FrontEnd(Javascript, Vue.js) → BackEnd(Java)
비동기 통신 axios, post 방식으로 전송하였는데, 아래와 같은 에러가 발생하였습니다.

.w.s.m.s.DefaultHandlerExceptionResolver : Resolved [org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported]

경고이긴하지만, 데이터가 안들어왔으니 결함이 되겠지요?

✔ 이유

- application/x-www-form-urlencoded
- charset=UTF-8

를 컨트롤러(Controller) - 어노테이션 @RequestBody 에서 인식하지 못하기 때문입니다.

✔ 결과

그래서 간단하게 RequestBody 어노테이션을 삭제해주었더니 정상적으로 데이터가 받아졌습니다.

이상입니다.

감사합니다.

JavaScript 비통기 통신(Ajax, Axios 등)으로 PHP에서 송신한 json 데이터를 수신하여 콘솔에 찍어보는 작업을 하도록 하겠습니다.

1. 비동기 통신
2. PHP 송신
3. Javascript 수신 및 출력

■ 1. 비동기 통신

비동기 통신에는 여러 종류가 있지만 이 중에서 axios를 사용

Axios CDN 을 사용하였다. (편하게)

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
getData() // 함수 호출

function getData () { 
  axios.get("api주소")	
    .then(function(response) {
      console.log(response)
    })
    .catch(function(error) {
      console.log(error)
    })
}
</script>

get method로 api 주소를 호출한 모습이다.

성공시 "200" 성공과 함께 response가 출력된다. (지금 바로 하면 404에러가 뜰겁니다.)

■ 2. PHP 데이터 송신

그 다음으로 PHP에서 데이터를 출력하여 echo 해주면 된다.

<?php
// mysql connection 생략

$result = mysqli_query($con, $sql) or die('query error');

while($row = mysqli_fetch_assoc($result)){
    $data_array[] = ($row);
}

$result = json_encode($data_array);
echo $result;

- 짧은 설명 -

php와 database(DB) mysql 에서 데이터를 출력한 문구
(특별한 프레임워크를 사용하고 있지 않다.)

while문을 통해 출력한 데이터를 $data_array[] 배열에 반복문을 통하여 삽입,
json 형태 { key: value }  로 바꿔주어 출력.

[ mysql 를 조금 참고하자면, column명 : data 인 셈이다. ]
[ key : value ]

- 짧은 설명 끝 - 

■ 3. Javascript 수신 및 출력

아까 위에서 axios.get( ) 안의 내용입니다. then()의 코드

<script>
.then(function(response) {
      console.log(response)
      response = JSON.stringify(response.data)
      labelsAndDatas(response)
    })

결과값에 에러가 없다면,
해당 response를 JSON.stringify(response.data) 를 통해 문자열로 변환 중요★
labelsAndDatas( ) 함수로 데이터를 전송

<script>

function labelsAndDatas (result) {
  console.log(result)
}
</script>

labelsAndDatas 함수에서 response.data 를 result 로 받아와 콘솔창에 찍어준 모습

이제 이 함수 내에서 원하는 작업을 하면 된다. 

key: value로  보았을 때,  { '날짜' : '값', '총량' : '값'  } 을 확인할 수 있다.

안녕하세요 상훈입니다.

이 글을 PHP에 올려야할지 javascript에 올려야할지 고민을 1초 정도 했고 자바스크립트 기반이기 때문에 자바스크립트에 게시하게 되었습니다.

해당 과정은  [  select-box의 한 항목을 선택하면, 그 아래의 select-box가 활성화되면서 해당되는 리스트를 출력  ]  합니다.

Ajax로 php에 호출을 하면, php의 데이터베이스에서 데이터를 출력하여 배열에 담고,
담은 배열을 json endcode하여 출력하는 값을 json 형식으로 받아, 파싱하여 출력하는 것입니다.

1. javascript(ajax) (제이쿼리 필요합니다! [ cdn 링크 ] )
2. php

HTML

<select id="name" onchange="selectItem()" name="name">
   <option value="" selected>아이템 리스트들</option>
   <option value="item01" >아이템 리스트1</option>
   <option value="item02" >아이템 리스트2</option>
   <option value="item03" >아이템 리스트3</option>
</select>
<select id="item_name">
   <option value="">선택해주세요</option>
</select>

이러한 html 요소들이 존재합니다.

onchange() 기능을 이용해 js에서 감지할 수 있도록 함수로 선언해주었습니다.

리스트 요소 중 하나를 선택하면 해당되는 2번째 select-box에 값을 출력해줍니다. [ 데이터베이스 이용 ]

JAVASCRIPT  -  아래에서 상세히 설명

<script>
  function selectItem(value){
      any_name = document.querySelector('#name').value
      
      $.ajax({
        url: "getItemList.php",
        method: "POST",
        data: { any_name: any_name }
      })
      .done(
      	(result) => {
      		if(result === ''){
      			const item_name = document.querySelector('#item_name')
      			while(item_name.hasChildNodes() ){
      				item_name.removeChild(item_name.firstChild)
      			}
      			$('#item_name').append('<option value="">' + '선택해주세요 ' + '</option>');	
      		}else{
      			const item_name = jQuery.parseJSON(result)
      			i = 0
      			$.each(item_name, function(){
      				$('#item_name').append('<option value="' + item_name[i] + '">' + item_name[i] + '</option>');
      				i++
      			});
      		}
      	}
      )
      .fail( () => { alert('다시 시도해주세요.') })
  }
</script>

ajax 기본 틀

PHP [getItemList.php]

<?php
// 
if($any_name = $_POST['any_name'] ){
    
    //database 연동
    include '../db.php'; 
    
    //sql 작성
    $sql = "select item_name from 테이블 where 컬럼명 = '$any_name' ";
    $result = mysqli_query($conn, $sql);
    
	// 빈 배열 $array[]에 $row['item_name'] 넣어주기
    while($row = mysqli_fetch_assoc($result)){
        $array[] = $row['item_name'];
    }

	// json 객체로 변환하여 echo
    echo json_encode($array, JSON_UNESCAPED_UNICODE);

    
}else{
    echo ""; // 만약 선택하지 않았을 때 반환하는 값 : null
}

처음부터 보자면, 

1. name 이라는 id 를 가진 요소의 값을 가져온다. ( 첫번째 select-box에서 선택한 요소 )

2. ajax를 이용하여 데이터를 송신한다. 

  [ 목적지 : url, 
    방식 : method(get, post) , 
    송신할 요소 (parameter) : data  ] 

3. php 에서 데이터를 출력하고 json 객체로 출력해주기
   -> 주석으로 충분히 설명을 했다고 생각합니다.

4. javascript 에서 .done 부분

if영역(return null) 과 else영역(return json)은 각기 다른 결과를 나타냅니다. 

else영역(return json)부터 보자면, 
1. item_name이라는 상수에 JSON을 파싱한 결과값(result)을 담습니다.
2. jQuery의 each함수를 사용하여, item_name을 반복해줍니다.
3. 각각 가지고 있는 item_name의 개수에 따라 결과에 추가될 리스트의 개수가 달라집니다.

if영역(return null) 에서는 추가했던 option을 제거해주는 역할을 합니다.
 (혹은 이 내용을 기본값으로 하는 것도 좋을것같군요. 기본적으로 속을 비워주고, option을 채워주는 방식으로요.)

평소 ajax를 잘 사용하지 않아 해당 내용을 작성하는데에 조금 헤맸습니다.

이번 기회로인해 공부 잘하고 갑니다. ㅎㅎ

참고

이상입니다.