[Vue3] Stand Alone #4. fetch post (php json 호출하기)

Vuejs 3 Stand Alone 으로 사용하기
Fetch : GET, POST

 

Vue3 를, (npm 없이, webpack 없에, package.json 없이 등등..),
홀로 사용 하려는 경우에 vue3 를 개발하는 방식 중 하나 입니다.
Stand Alone 으로 사용할 수 밖에 없는 경우만 봐주세요~

 

GET 방식

data.json 파일을 만들고 내용은 아래와 같습니다.

[
    {
        "name": "Kim",
        "age": 12
    },{
        "name": "Park",
        "age": 15
    },{
        "name": "Lee",
        "age": 13
    },{
        "name": "Choi",
        "age": 11
    }
]

버튼을 클릭했을 때 fetch() 로 저 데이터를 가져오기로 합니다.

데이터를 받아와서 json 으로 변환한 후 data에 있는 students 에 입력합니다.

getDataGET(){
    fetch('http://localhost:8888/data.json')
    .then(response=>response.json())
    .then(json=>this.students = json)
    .catch(error=>{
        console.log(error);
    });
}

students 는 아래와 같이 뿌려질겁니다.

<li v-for="(item, i) in students" :key="i">
    {{ item.name }} ({{ item.age }})
</li>

 

POST 방식

getDataPOST(){

    const data = {
        'got': 'hello~ world! 한글'
    }

    const option = {
        method: 'POST',
        mode: 'no-cors',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
    }

    fetch('http://localhost:8888/test.php', option)
    .then(response=>response.json())
    .then(json=>this.students2 = json)
    .catch(error=>{
        console.log(error);
    });
}

 

참고 : php 에서 json parameter 받기

test.php (위에서 호출하고 있는 test.php 소스입니다.)

<?php
    $json_array = json_decode(file_get_contents('php://input'), true);    // php array
    $post_value = $json_array["got"];

    $arr = array();
    array_push($arr, array("name"=>"Hello", "age"=>19, "etc"=>$post_value));
    array_push($arr, array("name"=>"Bryan", "age"=>18, "etc"=>$post_value));
    echo json_encode($arr);
?>

javascript 에서 fetch 로 보냈을 때 $_POST["got"] 으로 가져오지 못합니다.
아래와 같이 받아와야 합니다.
$json_array = json_decode(file_get_contents('php://input'), true);
echo $json_array["got"];

post 로 가져온 데이터는 아래와 같이 뿌려질겁니다.

<li v-for="(item, i) in students2" :key="i">
    {{ item.name }} ({{ item.age }}) <span v-if="item.etc != 'none'">{{ item.etc }}</span>
</li>

 

실행 결과

 

전체 소스

<meta charset="utf-8">

<!-- vue 3 -->
<script src="https://unpkg.com/vue@3"></script>

<div id="app">
    <button @click="getDataGET">Get Data[GET]</button>
    <ul>
        <li v-for="(item, i) in students" :key="i">
            {{ item.name }} ({{ item.age }})
        </li>
    </ul>
    <button @click="getDataPOST">Get Data[POST]</button>
    <ul>
        <li v-for="(item, i) in students2" :key="i">
            {{ item.name }} ({{ item.age }}) <span v-if="item.etc != 'none'">{{ item.etc }}</span>
        </li>
    </ul>
</div>

<script>
    var app = Vue.createApp({
        data() {
            return {
                students: [],
                students2: []
            }
        },
        methods: {
            getDataGET(){
                fetch('http://localhost:8888/data.json')
                .then(response=>response.json())
                .then(json=>this.students = json)
                .catch(error=>{
                    console.log(error);
                });
            },
            getDataPOST(){

                const data = {
                    'got': 'hello~ world! 한글'
                }

                const option = {
                    method: 'POST',
                    mode: 'no-cors',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(data)
                }

                fetch('http://localhost:8888/test.php', option)
                .then(response=>response.json())
                .then(json=>this.students2 = json)
                .catch(error=>{
                    console.log(error);
                });
            }
        },
    }).mount('#app')
</script>