vue.js框架+mintUI 网站自建之讨厌的BUG:$.ajax 拿不到后台发过来的数据

原本想从后台拿到图片数据加载到img标签src中,结果发现明明ajax请求数据成功了,但是src一直为空,无法将数据赋值到src中。

最初 在methods中提交ajax请求代码如下:

		getimage(){
         var  _this = this;
		$.ajax({
                type:'get',
                url:'./test2.php',
                success(response) {
                    response = JSON.parse(response);
                    if (response.code == "200") {
                      console.log(response);
                      _this.imagedata=response.data.imagedata;
                    }else{
                        console.log("fail to upload");
                    }
                },
                error(err){
                    console.log("an error occurred");
                }
            });
            document.getElementById('image').src=this.imagedata;
		},

BUG原因以及解决方法:
ajax为异步执行的(关于ajax原理见https://www.cnblogs.com/wanghp/p/6991554.html),所以在执行document.getElementById时很有可能imagedata并没有被赋值。
解决方法如下:

		getimage(){
         var  _this = this;
		$.ajax({
                type:'get',
                url:'./test2.php',
                success(response) {
                    response = JSON.parse(response);
                    if (response.code == "200") {
                      console.log(response);
                      _this.imagedata=response.data.imagedata;
                    }else{
                        console.log("fail to upload");
                    }
                },
                error(err){
                    console.log("an error occurred");
                }
            });
		}
		
//在html中加入v-for,当赋值成功后,让浏览器自动加载出所有图片,不再手动绑定src
<img v-for='item in imagedata' :src='item'/>


哦 对了,之前我直接写的_this=this,没有显示定义this为变量(var _this = this),导致拿到的结果是:
在这里插入图片描述
并不是图片的base64编码,而是Getter & Setter 这种,但好像不影响最终图片显示的结果。
这里也可以在ajax命令中加入: async:false 取消异步加载。但是一般会被浏览器忽略

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值