后端代码:

public void getIntegralQrcode(HttpServletResponse response, String token) throws BizException, IOException, WriterException {
logger.info("qrcode info ..."); response.setCharacterEncoding("UTF-8");
response.reset();
ServletOutputStream os = response.getOutputStream(); // 请求地址
String url = ConfigProperties.getUrl();
logger.info("qrcode info request url -- > {}", url); // 加密内容
String base64Code = Base64Utils.getBase64Code(WechatQrcodeTypeEnum.H5.getValue(), maculaConfig.getIntegralQrcodeScanName(), null);
logger.info("qrcode info base64Code -- > {}", base64Code); // 二维码内容
String content = WechatQrcodeUtil.getRequestUrl(url, "2", base64Code);
logger.info("qrcode info -- > {}", content); QRCodUtil.encodeQRCodeImage(content, null, WechatQrcodeUtil.IMAGE_WIDTH, WechatQrcodeUtil.IMAGE_HEIGHT, os);
os.flush();
os.close();
}

后端工具类:

public class WechatQrcodeUtil {

    static Logger logger = LoggerFactory.getLogger(WechatQrcodeUtil.class);

    private static final String TYPE = "type";
private static final String NAME = "name";
private static final String PARAM = "param";

// 加密内容定义区域key
private static final String base64= "base64"; private static final String EQUAL_STR = "=";
private static final String AND_STR = "&";
private static final String QUE_STR = "?"; public static final int IMAGE_WIDTH = 262;
public static final int IMAGE_HEIGHT = 262; /**
* 放入二维码内容
*
* @param url 请求地址
* @param modelType 请求模块名称
* @param base64 加密内容
* @return
*/
public static String getRequestUrl(String url, String modelType, String base64){
StringBuffer sb = new StringBuffer();
sb.append(url);
sb.append(QUE_STR);
sb.append(TYPE).append(EQUAL_STR).append(modelType);
sb.append(AND_STR);
sb.append(base64).append(EQUAL_STR).append(base64);
logger.info("request address: {}", sb.toString());
return sb.toString();
} /**
* 获取加密参数内容
* @param type 类型 @see{WechatQrcodeTypeEnum}
* @param name
* <li>channelName:</li>
* <li>moduleName:</li>
* <li>httpurl:在线页面地址</li>
* @param urlParams key:value,key:value,...
*
* @return
* @throws UnsupportedEncodingException
*/
public static String getBase64Code(String type, String name, Object... urlParams) throws UnsupportedEncodingException{
StringBuffer sb = new StringBuffer();
sb.append(TYPE).append(EQUAL_STR).append(type);
sb.append(AND_STR);
sb.append(NAME).append(EQUAL_STR).append(name);
if(urlParams != null){
sb.append(AND_STR);
sb.append(PARAM).append(EQUAL_STR).append(urlParams);
}
logger.info("request params: {}", sb.toString());
return Base64.encode(sb.toString().getBytes());
} }

前端Ajax请求:

<#--
* README
* 在页面定义页面token<i><@macula.formToken /></i>
*
* @author add by liuyc in 2018-11-28
*
--> <div id="qrcode-image" class="bottom-image"></div> <script type="text/javascript"> window.onload = function(){ var xhr = new XMLHttpRequest(); var url = base + "/qrcode?token=" + $("input[name='ftoken']").val();
xhr.open('GET', url, true); xhr.responseType = "blob";
xhr.onload = function () {
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.getElementById("qrcode-image").appendChild(img);
}
}
xhr.send();
} </script>

写入页面后的展示:

Ajax请求二进制流并在页面展示的更多相关文章

  1. ajax 请求二进制流 图片

    <html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    ...

  2. ajax 请求二进制流 图片 文件 XMLHttpRequest 请求并处理二进制流数据 之最佳实践

    写在前面 :从提出需求到完美的解决问题,实现过程是曲折的. 需求:在前(web client)后(Restful Service)端完全解耦的模式框架下,webclient需要请求 Service 返 ...

  3. 第六章 MVC之 FileResult和JS请求二进制流文件

    一.FileResult 1.简介 表示一个用于将二进制文件内容发送到响应的基类.它有三个子类: FileContentResultFilePathResultFileStreamResult 推荐阅 ...

  4. ajax请求二进制流图片并渲染到html中img标签

    日常显示图片都诸如这种形式:直接使用img的src属性 <img src="图片路径.地址" alt="" /> 以上方法无法在获取图片请求中设置请 ...

  5. JavaScript读二进制文件并用ajax传输二进制流

    综合网上多个教程,加上自己实践得出的方法,目前能够兼容谷歌.IE11.IE10. htmlbody里的内容,没什么特殊的. <div id="dConfirm"> &l ...

  6. 通过配置http拦截器,来进行ajax请求验证用户登录的页面跳转

    在.NET中验证用户是否登录或者是否过期,若需要登录时则将请求转向至登录页面. 这个流程在进行页面请求时是没问题的,能正确进行页面跳转. 然而在使用xmlhttprequest时,或者jq的getJs ...

  7. ajax请求后弹开新页面被浏览器拦截

    window.open()我想应该很多人都不陌生吧,它可以实现除用a标签以外来实现打开新窗口! 最近开发项目用到时,却遇到了麻烦,本来好好的弹出窗口,结果被浏览器无情的给拦截了! 代码如下: $.ge ...

  8. SpringMVC响应Ajax请求(@Responsebody注解返回页面)

    项目需求描述:page1中的ajax请求Controller,Controller负责将service返回的数据填充到page2中,并将page2整个页面返回到page1中ajax的回调函数. 一句话 ...

  9. session过期,拦截ajax请求并跳转登录页面

    1.方法一 :1.1使用filter 和ajaxsetup 对ajax进行拦截并跳转登录页面 public void doFilter(ServletRequest request, ServletR ...

随机推荐

  1. PostgreSQL自学笔记:8 查询数据

    8 查询数据 8.1 基本查询语句 select语句的基本格式是: select {* | 字段1[,字段2,...]} [ from 表1,表2... [where 表达式] [group by & ...

  2. 使用mybatis assembly插件打成tar包,在linux系统中运行服务

    使用mybatis assembly插件打成tar包,在linux系统中运行服务 assembly插件插件地址: 链接:https://pan.baidu.com/s/1i6bWPxF 密码:gad5 ...

  3. Petrozavodsk Summer-2017. Moscow IPT Contest

    A. A Place For My Head 留坑. B. New Divide 从高位到低位贪心,当这一位是$0$时,要尽量取$1$,维护高维后缀最小值进行判断即可. 时间复杂度$O((n+a)\l ...

  4. pycharm的一些快捷键

    [转]pycharm的一些快捷键 忙了好一阵终于忙完了,最近在重构代码,有许多地方要注释什么的,在多行注释时总是很麻烦,就想着pycharm有没有快捷键,就像visual studio一样.于是上Go ...

  5. javaweb中的文件上传的一般写法(初次接触时写)

    javaweb上传文件 上传文件的jsp中的部分 上传文件同样可以使用form表单向后端发请求,也可以使用 ajax向后端发请求 1. 通过form表单向后端发送请求 <form id=&quo ...

  6. 7、vue-awesome-swiper页面跳转

    <template> <swiper :options='swiperOption' ref="mySwiper" class='swiper-container ...

  7. SPARK-18560

    ##### Receiver data can not be dataSerialized properly. ``` // :: ERROR executor.Executor: Exception ...

  8. Adobe Premiere Pro CS6 下载安装包成功

    Adobe Premiere Pro CS6 https://pan.baidu.com/s/1miBq59e 下载地址 安装方式 断网(必须):安装官方原版程序: 一.安装前先运行程序包的“必先运行 ...

  9. PHP算法学习(4) 随机算法

    svn地址:svn://gitee.com/zxadmin/live_z <?php /* * 随机数算法 * 伪随机数 根据分布概率 */ final class Random { /* * ...

  10. css动画-animation各个属性详解(转)

    CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括:①a ...