后端代码:
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请求二进制流并在页面展示的更多相关文章
-
ajax 请求二进制流 图片
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> ...
-
ajax 请求二进制流 图片 文件 XMLHttpRequest 请求并处理二进制流数据 之最佳实践
写在前面 :从提出需求到完美的解决问题,实现过程是曲折的. 需求:在前(web client)后(Restful Service)端完全解耦的模式框架下,webclient需要请求 Service 返 ...
-
第六章 MVC之 FileResult和JS请求二进制流文件
一.FileResult 1.简介 表示一个用于将二进制文件内容发送到响应的基类.它有三个子类: FileContentResultFilePathResultFileStreamResult 推荐阅 ...
-
ajax请求二进制流图片并渲染到html中img标签
日常显示图片都诸如这种形式:直接使用img的src属性 <img src="图片路径.地址" alt="" /> 以上方法无法在获取图片请求中设置请 ...
-
JavaScript读二进制文件并用ajax传输二进制流
综合网上多个教程,加上自己实践得出的方法,目前能够兼容谷歌.IE11.IE10. htmlbody里的内容,没什么特殊的. <div id="dConfirm"> &l ...
-
通过配置http拦截器,来进行ajax请求验证用户登录的页面跳转
在.NET中验证用户是否登录或者是否过期,若需要登录时则将请求转向至登录页面. 这个流程在进行页面请求时是没问题的,能正确进行页面跳转. 然而在使用xmlhttprequest时,或者jq的getJs ...
-
ajax请求后弹开新页面被浏览器拦截
window.open()我想应该很多人都不陌生吧,它可以实现除用a标签以外来实现打开新窗口! 最近开发项目用到时,却遇到了麻烦,本来好好的弹出窗口,结果被浏览器无情的给拦截了! 代码如下: $.ge ...
-
SpringMVC响应Ajax请求(@Responsebody注解返回页面)
项目需求描述:page1中的ajax请求Controller,Controller负责将service返回的数据填充到page2中,并将page2整个页面返回到page1中ajax的回调函数. 一句话 ...
-
session过期,拦截ajax请求并跳转登录页面
1.方法一 :1.1使用filter 和ajaxsetup 对ajax进行拦截并跳转登录页面 public void doFilter(ServletRequest request, ServletR ...
随机推荐
-
《机器学习实战》学习笔记——第13章 PCA
1. 降维技术 1.1 降维的必要性 1. 多重共线性--预测变量之间相互关联.多重共线性会导致解空间的不稳定,从而可能导致结果的不连贯.2. 高维空间本身具有稀疏性.一维正态分布有68%的值落于正负 ...
-
Usage of readonly and const
Many new learners can not make sure the usage scenarios of readonly and const keywords. In my opinio ...
-
Linux下SVN的简单配置
1.安装svn sudo yum install subversion 2.查看是否安装成功 svnserve --version 3.创建svn目录 svnadmin create 目录名 例如:s ...
-
敏捷开发之产品日日新,一步通之---自动化代码构建->;自动化打包->;自动化安装部署
本文将介绍如何自动化实现代码构建,自动化代码打包成exe安装包,自动化安装到测试环境.通过计划任务的方式,每天自动化发布最新的产品供老板展示,供测试人员使用,真正实现敏捷的快速迭代. 自动代码构建 自 ...
-
MacOS下Rails+Nginx+SSL环境的搭建(中)
三.配置Nginx 先是修改 hosts 文件,意思是创建一个本地域名以便我们访问,比如: $ sudo subl /etc/hosts 127.0.0.1 rails_project.local 但 ...
-
DSAPI Wifi热点的扫描与连接
使用DSAPI扫描和连接Wifi热点,支持连接隐藏的SSID. 效果演示: 代码如下: Private Wifi As New DSAPI.网络.Wifi Private Sub Button1_Cl ...
-
Python学习之路基础篇--05Python基础+列表和元组
1 list # 增 city = ["wuhan", "shanghai", "chongqing", "changsha&qu ...
-
WPF ListView 使用GridView 带有Header 以及点击header排序 sort
ListView: <ListView x:Name="lvFiles" VerticalAlignment="Stretch" Background=& ...
-
gitlab 灾备
Gitlab创建备份 使用Gitlab一键安装包安装Gitlab非常简单,同样的备份恢复与迁移也非常简单.使用一条命令即可创建完整的Gitlab备份: gitlab-rake gitlab:ba ...
-
angular之自定义 directive
1,指令的创建至少需要一个带有@Directive装饰器修饰的控制器类.@Directive装饰器指定了一个选择器名称,用于指出与此指令相关联的属性的名字. 2,创建一个highlight.direc ...