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中加入,当赋值成功后,浏览器会自动加载出所有图片,不用手动绑定src
<img v-for='item in imagedata' :src='item'/>
哦 对了,之前我直接写的_this=this,没有显示定义this为变量(var _this = this),导致拿到的结果是:
并不是图片的base64编码,而是Getter & Setter 这种,但好像不影响最终图片显示的结果