基于vue.js,axios.js获取后端php文件json数据基本实例

最新推荐文章于 2023-12-25 13:53:59 发布

风飞扬fq

最新推荐文章于 2023-12-25 13:53:59 发布

阅读量1.1k

点赞数

分类专栏：前端笔记文章标签： vue php ajax vue.js

本文链接：https://blog.csdn.net/fq_fly/article/details/103660654

版权

前端笔记专栏收录该内容

29 篇文章 0 订阅

订阅专栏

基于vue框架异步获取后端php文件json实例

准备js文件

下载好两个js文件于本地目录，此处本人放于vue-js目录下，前端加载js文件如下。

<script src="./vue-js/vue.min.js"></script>
<script src="./vue-js/axios.min.js"></script>

后端php文件返回json数据，此处命名为data.php，具体数据如下。

<?php
header('Content-Type:application/json');//加上这行,前端那边就不需要var result = $.parseJSON(data);
$retdata = array(
"student"=>array("name"=>"feiq","sex"=>"male","age"=>18,"job"=>'agineer'),"superstar"=>array("name"=>"MM","sex"=>"female","age"=>20,"job"=>'signer')
);
echo json_encode($retdata);
?>

创建根实例，具体js代码如下。

var vm = new Vue({
        el:'#myapp',
        data(){
            return {
                info:'null'
            }
        },
        mounted(){
            axios
                .get('data.php')
                .then(response=>(this.info=response.data))
                .catch(function (error) {//请求失败处理
                    alert(error)
                })
        }
    });

上述代码中，通过调用axios.min.js中的get方法向文件请求数据；数据的响应为response，通过代码this.info=response.data获取具体的数据。
前端html只需根据后端所提供的数据接口对应显示即可
整体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>从php文件中异步获取json数据</title>
    <script src="./vue-js/vue.min.js"></script>
    <script src="./vue-js/axios.min.js"></script>
</head>
<body>
<div id="myphp">
<p>从php文件中读取json数据</p>
    <ol>
        <li>名字</li>
        <li v-for="sites in info">{{sites.name}}</li>
    </ol>
    <ol>
        <li>性别</li>
        <li v-for="sites in info">{{sites.sex}}</li>
    </ol>
    <ol>
        <li>年龄</li>
        <li v-for="sites in info">{{sites.age}}</li>
    </ol>
    <ol>
        <li>职业</li>
        <li v-for="sites in info">{{sites.job}}</li>
    </ol>
</div>
<script>
    new Vue({
        el:'#myphp',
        data(){
            return {
                info:null
            }
        },
        mounted(){
            axios
                .get('data.php')
                .then(response=>(this.info=response.data))
                .catch(function (error) {
                    alert(error)
                })
        }
    })
</script>
</body>
</html>