浅谈ajax请求不同页面的微信JSSDK问题


Posted in Javascript onFebruary 26, 2018

问题场景:

我在A页面有一个表单内容需要使用蓝牙打印机打印,填完表单信息,并通过ajax请求发送到 B文件(PHP)中处理信息,正常通过form表单跳转到B页面后,是可以打印出来的,因为B页面中除了处理 数据的PHP之外还混合了 JS代码,也就是JSSDK部分。然而通过ajax请求发送过去,则无响应,所有jssdk除了wx.ready和wx.config之外都无法执行。(A.B两个文件都有wx.config,wx.ready配置)

比如发送数据的参数:

wx.invoke('sendDataToWXDevice',data,function(res){
  //微信提供的接口,只有这么一个回调函数,如果通过ajax请求,则无法进入回调函数
 if(res.err_msg=='sendDataToWXDevice:ok')
 {
  alert("打印成功");
  window.history.go(-1);
 }
 else
 {
  alert("打印失败");
 } 
 });

于是我就猜测,通过请求PHP文件,返回的数据包含了我的B页面JS代码部分,也就是说,A页面有wx.config和wx.ready,B页面返回的内容也有这两个接口,为了排除这个问题,

我把B页面的所有微信接口全部去掉了。只剩下处理完表单需要发送的内容保存在一个input中。

//返回 处理后的数据
echo '<input type = "hidden" name = "print_str" id = "print_str" value="'.$hex_str.'"/ >';
echo '<input type = "hidden" name = "device_id" id = "device_id" value="'.$device_ID.'"/ >';
?>

由原本跳转页面打印改成异步请求打印,实际上,从微信发送数据给设备还是在A页面执行,B文件只是负责返回由A传给B并通过加密处理的数据,所以,删掉B文件中所有混写的html和JS代码,其中要注意的是config配置中是否包含 beta:true属性,因为涉及到硬件SDK需要,并且接口列表参数中是否也填写上了要用到的硬件SDK接口

我当时觉得我的想法是正确的。但是我每次在wx.invoke包括openWXDeviceLib,sendDataToWXDevice等的 回调函数中用document.write写下返回的结果,但是我很快发现每次wx.invoke后面的输出都不执行了,而且我原本页面的内容也被清空了,此时我还没意识到这个问题,还是不断测试,直到我在invoke之前输出了由B页面返回的数据(以上document.write内容都是我在请求成功后的success回调函数输出的),我才意识到,我要发送的数据,在我执行invoke方法的时候,已经变成了undefind,我才恍然发现,我的页面原本内容被清空了(因为之前是跳转到B页面打印,所以本身就是一片空白,~ ~,习惯了,没发现变化),后来我改用alert输出,就可以正常打印了,也就是说 JQUERY的ajax封装的回调函数中,用document.write输出,会重置页面内容(我之所以用document.write来输出的原因是,之前测试某个阶段中,原本作为调试的config是通过alert窗口弹出信息的,但是不知道为何他却以document.write的形式写在了页面上。我现在已经忘了当时是什么情况,所以才会导致这个错误,不过也算是知道了JQ的这个问题)

谨记:JQuery的ajax的success回调函数中用document.write输出内容会重置页面内容,至于其他回调函数会不会有兴趣可以自己看一下。

以上这篇浅谈ajax请求不同页面的微信JSSDK问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js不是基础的基础
Dec 24 Javascript
删除条目时弹出的确认对话框
Jun 05 Javascript
JavaScript中的继承之类继承
May 01 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
Jun 25 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
Apr 22 Javascript
Node.js+ELK日志规范的实现
May 23 Javascript
JavaScript提升机制Hoisting详解
Oct 23 Javascript
JS中的const命令你真懂它吗
Mar 08 Javascript
在vue中封装方法以及多处引用该方法详解
Aug 14 Javascript
分享8个JavaScript库可更好地处理本地存储
Oct 12 Javascript
element中table高度自适应的实现
Oct 21 Javascript
Vue 实现拨打电话操作
Nov 16 Javascript
详解Node 定时器
Feb 26 #Javascript
node.js基础知识小结
Feb 26 #Javascript
Es6 Generator函数详细解析
Feb 24 #Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
Feb 24 #Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
Feb 24 #Javascript
JS抛物线动画实例制作
Feb 24 #Javascript
浅谈VUE监听窗口变化事件的问题
Feb 24 #Javascript
You might like
Zerg建筑一览
2020/03/14 星际争霸
模拟OICQ的实现思路和核心程序(三)
2006/10/09 PHP
让你同时上传 1000 个文件 (二)
2006/10/09 PHP
php判断用户是否关注微信公众号
2016/07/22 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
ThinkPHP 3使用OSS的方法
2018/07/19 PHP
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
2010/02/15 Javascript
JavaScript中使用正则匹配多条,且获取每条中的分组数据
2010/11/30 Javascript
setTimeout的延时为0时多个浏览器的区别
2012/05/23 Javascript
Highcharts 非常实用的Javascript统计图demo示例
2013/07/03 Javascript
js select option对象小结
2013/12/20 Javascript
js判断手机和pc端选择不同执行事件的方法
2015/01/30 Javascript
JavaScript如何自定义trim方法
2015/07/28 Javascript
javascript给span标签赋值的方法
2015/11/26 Javascript
基于Vue2x的图片预览插件的示例代码
2018/05/14 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
2018/06/19 Javascript
vue如何使用rem适配
2021/02/06 Vue.js
[01:14:12]2018DOTA2亚洲邀请赛4.7 总决赛 LGD vs Mineski 第二场
2018/04/09 DOTA
Python变量赋值的秘密分享
2018/04/03 Python
Python开发之Nginx+uWSGI+virtualenv多项目部署教程
2019/05/13 Python
python中pip的使用和修改下载源的方法
2019/07/08 Python
django 实现将本地图片存入数据库,并能显示在web上的示例
2019/08/07 Python
python 求定积分和不定积分示例
2019/11/20 Python
CSS伪类与CSS伪元素的区别及由来具体说明
2012/12/07 HTML / CSS
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
2014/05/07 HTML / CSS
阿联酋团购网站:Groupon阿联酋
2016/10/14 全球购物
早晨薰衣草在线女性精品店:Morning Lavender
2021/01/04 全球购物
家长对小学生的评语
2014/01/28 职场文书
土木工程师职业规划范文
2014/03/07 职场文书
机电专业求职信
2014/06/14 职场文书
大学生作弊检讨书
2014/09/11 职场文书
个人股份转让协议书范本
2015/01/28 职场文书
2015年公共机构节能宣传周活动总结
2015/03/26 职场文书
心得体会格式及范文
2016/01/25 职场文书
用Python实现屏幕截图详解
2022/01/22 Python
三种方式清除vue路由跳转router-link的历史记录
2022/04/10 Vue.js