浅谈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面向对象之四 继承
Feb 08 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
Dec 17 Javascript
javascript中的遍历for in 以及with的用法
Dec 22 Javascript
浅析JavaScript Array和string的转换(推荐)
May 20 Javascript
深入理解JavaScript内置函数
Jun 03 Javascript
最佳的JavaScript错误处理实践
Jul 16 Javascript
360doc网站不登录就无法复制内容的解决方法
Jan 27 Javascript
Koa2 之文件上传下载的示例代码
Mar 29 Javascript
vue服务端渲染添加缓存的方法
Sep 18 Javascript
微信开发之微信jssdk录音功能开发示例
Oct 22 Javascript
前端开发基础javaScript的六大作用
Aug 06 Javascript
vue+node 实现视频在线播放的实例代码
Oct 19 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
一个用于mysql的数据库抽象层函数库
2006/10/09 PHP
php UBB 解析实现代码
2011/11/27 PHP
php 读取文件头判断文件类型的实现代码
2013/08/05 PHP
php中unserialize返回false的解决方法
2014/09/22 PHP
PHP+Mysql无刷新问答评论系统(源码)
2016/12/20 PHP
PHP 表单提交及处理表单数据详解及实例
2016/12/27 PHP
PHP使用mongoclient简单操作mongodb数据库示例
2019/02/08 PHP
巧妙破除网页右键禁用的十大绝招
2006/08/12 Javascript
广告切换效果(缓动切换)
2009/05/27 Javascript
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
2011/05/28 Javascript
js关闭父窗口时关闭子窗口
2013/04/01 Javascript
node.js中的http.response.writeHead方法使用说明
2014/12/14 Javascript
Javascript中的getUTCDay()方法使用详解
2015/06/10 Javascript
jQuery Easyui实现左右布局
2016/01/26 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
2016/04/29 Javascript
NodeJS连接MongoDB数据库时报错的快速解决方法
2016/05/13 NodeJs
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
2016/10/04 Javascript
Vue组件全局注册实现警告框的实例详解
2018/06/11 Javascript
深入浅析Vue全局组件与局部组件的区别
2018/06/15 Javascript
微信小程序实现留言功能
2018/10/31 Javascript
Vue组件之单向数据流的解决方法
2018/11/10 Javascript
vue 实现单选框设置默认选中值
2019/11/07 Javascript
在Python中用get()方法获取字典键值的教程
2015/05/21 Python
Python与人工神经网络:使用神经网络识别手写图像介绍
2017/12/19 Python
基于python实现学生管理系统
2018/10/17 Python
基于python二叉树的构造和打印例子
2019/08/09 Python
详解Python并发编程之创建多线程的几种方法
2019/08/23 Python
python matplotlib 画dataframe的时间序列图实例
2019/11/20 Python
pip安装提示Twisted错误问题(Python3.6.4安装Twisted错误)
2020/05/09 Python
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
2014/09/02 HTML / CSS
美国知名的家庭连锁百货商店:Boscov’s
2017/07/27 全球购物
酒店管理毕业生自荐信
2013/10/24 职场文书
司法工作人员群众路线对照检查材料思想汇报
2014/09/30 职场文书
2015年卫生监督工作总结
2015/05/21 职场文书
2015年加油站站长工作总结
2015/05/27 职场文书
MySQL不使用order by实现排名的三种思路总结
2021/06/02 MySQL