基于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>
  • 测试结果
    基于vue.js,axios.js获取后端php文件json数据基本实例_php

最后推荐一个公众号，一枚IT技术人成长路上关于生活和职场的思考，欢迎书友们前来交流和分享心得

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