浅谈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 相关文章推荐
JavaScript与Div对层定位和移动获得坐标的实现代码
Sep 08 Javascript
菜鸟javascript基础资料整理2
Dec 06 Javascript
Javascript弹出窗口的各种方法总结
Nov 11 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
Jun 23 Javascript
JavaScript基于setTimeout实现计数的方法
May 08 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
Feb 17 Javascript
百度地图给map添加右键菜单(判断是否为marker)
Mar 04 Javascript
vue.js中$watch的用法示例
Oct 04 Javascript
VSCode配置react开发环境的步骤
Dec 27 Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
Mar 10 Javascript
JavaScript 截取字符串代码实例
Sep 05 Javascript
关于vue项目中搜索节流的实现代码
Sep 17 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
索尼SONY ICF-SW7600GR电路分析与改良
2021/03/02 无线电
PHP下编码转换函数mb_convert_encoding与iconv的使用说明
2009/12/16 PHP
Linux下将excel数据导入到mssql数据库中的方法
2010/02/08 PHP
PHP不用递归实现无限分级的例子分享
2014/04/18 PHP
PHP+Redis开发的书签案例实战详解
2019/07/09 PHP
javascript jQuery $.post $.ajax用法
2008/07/09 Javascript
javascript原生ajax写法分享
2016/04/10 Javascript
js提交form表单,并传递参数的实现方法
2016/05/25 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
String字符串截取的四种方式总结
2016/11/28 Javascript
jQuery 表单序列化实例代码
2017/06/11 jQuery
vue-cli系列之vue-cli-service整体架构浅析
2019/01/14 Javascript
vue父子模板传值问题解决方法案例分析
2020/02/26 Javascript
javascript实现雪花飘落效果
2020/08/19 Javascript
vue 实现基础组件的自动化全局注册
2020/12/25 Vue.js
Python 拷贝对象(深拷贝deepcopy与浅拷贝copy)
2008/09/06 Python
在类Unix系统上开始Python3编程入门
2015/08/20 Python
Windows下安装python MySQLdb遇到的问题及解决方法
2017/03/16 Python
[原创]使用豆瓣提供的国内pypi源
2017/07/02 Python
实例讲解Python爬取网页数据
2018/07/08 Python
tensorflow 恢复指定层与不同层指定不同学习率的方法
2018/07/26 Python
python利用selenium进行浏览器爬虫
2019/04/25 Python
python 实现return返回多个值
2019/11/19 Python
pytorch 实现在一个优化器中设置多个网络参数的例子
2020/02/20 Python
使用Tensorflow-GPU禁用GPU设置(CPU与GPU速度对比)
2020/06/30 Python
Python包资源下载路径报404解决方案
2020/11/05 Python
美国新娘礼品店:The Paisley Box
2020/09/08 全球购物
沙特阿拉伯家用电器和电子产品购物网站:Sheta and Saif
2020/04/03 全球购物
后勤园长自我鉴定
2013/10/17 职场文书
企业职业病防治方案
2014/05/29 职场文书
高中学生会竞选演讲稿
2014/08/25 职场文书
介绍信如何写
2015/01/31 职场文书
反腐倡廉主题教育活动总结
2015/05/07 职场文书
看雷锋电影观后感
2015/06/10 职场文书
总结Python连接CS2000的详细步骤
2021/06/23 Python
关于EntityWrapper的in用法
2022/03/22 Java/Android