JavaScript 비통기 통신(Ajax, Axios 등)으로 PHP에서 송신한 json 데이터를 수신하여 콘솔에 찍어보는 작업을 하도록 하겠습니다.
1. 비동기 통신
2. PHP 송신
3. Javascript 수신 및 출력
비동기 통신에는 여러 종류가 있지만 이 중에서 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에러가 뜰겁니다.)
그 다음으로 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 ]
- 짧은 설명 끝 -
아까 위에서 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로 보았을 때, { '날짜' : '값', '총량' : '값' } 을 확인할 수 있다.
[ JavaScript ] 배열에 앞에, 뒤에 데이터 삽입하는 방법 (0) | 2021.11.30 |
---|---|
[ JavaScript ] Chart.js 사용 예시 (0) | 2021.11.29 |
[ JavaScript ] 클래스 추가 후 자동 삭제 | how to Add element, Delete element, Event, SetTimeout, Function, Instance, Style (0) | 2021.11.25 |
[ JavaScript ] 오늘 날짜 출력하기 (0) | 2021.11.22 |
에러해결 : Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 (0) | 2021.11.01 |
댓글 영역