浅谈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 以对象为索引的关联数组
May 19 Javascript
js用正则表达式来验证表单(比较齐全的资源)
Nov 17 Javascript
javascript结合canvas实现图片旋转效果
May 03 Javascript
第九章之路径分页标签与徽章组件
Apr 25 Javascript
移动端 一个简单易懂的弹出框
Jul 06 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
Aug 25 Javascript
基于vue的短信验证码倒计时demo
Sep 13 Javascript
vue实现模态框的通用写法推荐
Feb 26 Javascript
vue2.0父子组件间传递数据的方法
Aug 16 Javascript
了解JavaScript表单操作和表单域
May 27 Javascript
vscode调试node.js的实现方法
Mar 22 Javascript
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 Vue.js
详解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
php 文件夹删除、php清除缓存程序
2009/08/25 PHP
php开发环境配置记录
2011/01/14 PHP
PHP查看当前变量类型的方法
2015/07/31 PHP
smarty高级特性之对象的使用方法
2015/12/25 PHP
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
2011/03/30 Javascript
拖动table标题实现改变td的大小(css+js代码)
2013/04/16 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
2014/05/11 Javascript
JS实现动态给图片添加边框的方法
2015/04/01 Javascript
jQuery表格插件datatables用法详解
2020/11/23 Javascript
原生js实现图片层叠轮播切换效果
2016/02/02 Javascript
浅谈js多维数组和hash数组定义和使用
2016/07/27 Javascript
nodejs微信公众号支付开发
2016/09/19 NodeJs
详解如何在vue中使用sass
2017/06/21 Javascript
node+vue实现用户注册和头像上传的实例代码
2017/07/20 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
2018/03/21 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
2018/08/24 Javascript
KnockoutJS数组比较算法实例详解
2019/11/25 Javascript
jQuery操作事件完整实例分析
2020/01/10 jQuery
JavaScript闭包原理与用法学习笔记
2020/05/29 Javascript
javaScript实现一个队列的方法
2020/07/14 Javascript
vue 中this.$set 动态绑定数据的案例讲解
2021/01/29 Vue.js
Python学习小技巧之利用字典的默认行为
2017/05/20 Python
Python中用字符串调用函数或方法示例代码
2017/08/04 Python
浅谈配置OpenCV3 + Python3的简易方法(macOS)
2018/04/02 Python
django解决跨域请求的问题详解
2019/01/20 Python
python导入pandas具体步骤方法
2019/06/23 Python
TensorFlow绘制loss/accuracy曲线的实例
2020/01/21 Python
django ORM之values和annotate使用详解
2020/05/19 Python
Python如何操作docker redis过程解析
2020/08/10 Python
pytorch下的unsqueeze和squeeze的用法说明
2021/02/06 Python
加拿大品牌鞋包连锁店:Little Burgundy
2021/02/28 全球购物
医学院毕业生自荐信范文
2014/03/06 职场文书
国贸专业的职业规划书
2014/03/15 职场文书
出纳2015年度工作总结范文
2015/10/14 职场文书
python爬取新闻门户网站的示例
2021/04/25 Python
MongoDB数据库部署环境准备及使用介绍
2022/03/21 MongoDB