vue爬坑一:JSON数据接收成功,页面渲染失败
json
适用于现代 C++ 的 JSON。
项目地址:https://gitcode.com/gh_mirrors/js/json
免费下载资源
·
前面一直使用豆瓣的API,所以一直没有遇到这样的问题。
我自己用PHP做了一个后端的API,问题就来了。
首先是json数据,直接查看API接口,数据是正常的。
但是在前端接收后,json数据接收的格式就不正常了。
一开始,页面渲染过程中,还有过数据一闪而过的情况。
当时我顿时懵逼。
我擦,从来没遇到过这种情况啊,一闪而过什么情况,完全无从下手啊,你说它没接收到,不是,你说它渲染失败,不完全是,但是之后我就从渲染下手,各种情况试了,连data里面数据的括号都给试了一遍,不行。
后来没办法,先放一边吧,请过朋友的指导后,把后端的格式毛病解决了。
正常情况json数据接收后请应该是这样:
可是我有问题的json是这样:
以下是正确代码:
前端html部分
<div class="indexContent" v-for="item in xin_body">
<div class="indexContentTitle">
<div>{{ item.article_id }}</div>
</div>
</div>
前端JS部分
data() {
return {
xin_body:[],
tranform: false
}
},
created() {
this.$http.get('http://localhost:9090/xin/index.php/Home/index/xinjson').then((success) => {
// 请求成功,关闭loading
this.tranform = false;
// 由于请求成功返回的是Promise对象,我们要从success.body拿到数组
this.xin_body = success.body;
}, (error) => {
console.log(error)
})
},
后端API部分
public function xinjson(){
$data = M('article');
$article = $data->select();
// 指定允许其他域名访问
header('Access-Control-Allow-Origin:*');
// 响应类型
header('Access-Control-Allow-Methods: GET,POST,PUT');
header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');
header('Content-Type:application/json; charset=utf-8');
//$json = json_encode($article);
$this -> ajaxReturn($article, 'JSON');
//echo $article;
}
在后端api里面添加了
header('Content-Type:application/json; charset=utf-8');
删去了
$json = json_encode($article);
前端没有改动.
感谢大兵同学拿出宝贵的时间帮我解决问题,话说刚结束不就就去陪女朋友了。(手动白眼)我乖乖的继续我的代码。
大兵同学的博客:http://geekhelp.cn/
GitHub 加速计划 / js / json
41.72 K
6.61 K
下载
适用于现代 C++ 的 JSON。
最近提交(Master分支:1 个月前 )
960b763e
4 个月前
8c391e04
6 个月前
更多推荐
已为社区贡献3条内容
所有评论(0)