摘要：
最近遇到一个场景，就是做一个验证码，后台返回一张验证码，而且这个请求中带有唯一的id标识，前端发送验证的时候这个id需要伴随着code一起发送到后端。日常显示图片都直接使用img的...
最近遇到一个场景，就是做一个验证码，后台返回一张验证码，而且这个请求中带有唯一的id标识，前端发送验证的时候这个id需要伴随着code一起发送到后端。日常显示图片都直接使用img的src属性，就可以显示出图片，但是不能获取到id，所以就利用Ajax进行get请求获取图片得二进制流，然后渲染进Img标签然后append到dom中。
原生得Ajax请求var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","http://10.10.0.62:10001/api/charge/admin/v1/image/code",true);
xmlhttp.responseType = "blob";
xmlhttp.onload = function(){
console.log(this);
if (this.status == 200) {
var blob = this.response;
var img = document.createElement("img");
img.onload = function(e) {
window.URL.revokeObjectURL(img.src);
};
img.src = window.URL.createObjectURL(blob);
document.body.appendChild(img);
}
}
xmlhttp.send();
jQuery的Ajax请求
因为jQuery的Ajax没有Blob数据类型的请求，所以在Github上有一个大牛封装了jQuery数据类型扩展插件，所以我们直接就拿来用
JS代码：$.ajax({
type: "GET",
headers: {
Accept: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8'
},
dataType: 'blob',
url: "https://api.lbtc.io/genvercode",
success: function (data, status, res) {
var reader = new window.FileReader();
reader.readAsDataURL(data);
reader.onloadend = function () {
$("#code").attr('src', reader.result);
$("#code").attr('data-uid', res.getResponseHeader('Content-Type').split(",")[1]);
};
}
})
HTML：
img我引了一个灰色的占位图。