浅谈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 相关文章推荐
jQuery的Ajax的自动完成功能控件简要说明
Feb 22 Javascript
AngularJS初始化静态模板详解
Jan 14 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
May 30 Javascript
使用plupload自定义参数实现多文件上传
Jul 19 Javascript
pm2 部署 node的三种方法示例
Oct 20 Javascript
Vue按需加载的具体实现
Dec 02 Javascript
vue2.0父子组件间传递数据的方法
Aug 16 Javascript
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
vue+element实现表单校验功能
May 20 Javascript
jquery分页优化操作实例分析
Aug 23 jQuery
layui-table获得当前行的上/下一行数据的例子
Sep 24 Javascript
vue的hash值原理也是table切换实例代码
Dec 14 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+mcDropdown实现文件路径可在下拉框选择
2013/08/07 PHP
PHP开发中常见的安全问题详解和解决方法(如Sql注入、CSRF、Xss、CC等)
2014/04/21 PHP
destoon二次开发入门示例
2014/06/20 PHP
php实现的Timer页面运行时间监测类
2014/09/24 PHP
thinkPHP分组后模板无法加载问题解决方法
2016/07/12 PHP
php flush无效,IIS7下php实时输出的方法
2016/08/25 PHP
PHP获取文件扩展名的方法实例总结
2017/06/10 PHP
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
2013/12/29 Javascript
JavaScript中的alert()函数使用技巧详解
2014/12/29 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2015/04/01 Javascript
js 判断各种数据类型的简单方法(推荐)
2016/08/29 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
2016/10/08 Javascript
JS实现物体带缓冲的间歇运动效果示例
2016/12/22 Javascript
纯JS实现表单验证实例
2016/12/24 Javascript
微信小程序request出现400的问题解决办法
2017/05/23 Javascript
对于js垃圾回收机制的理解
2017/09/14 Javascript
jquery实现回车键触发事件(实例讲解)
2017/11/21 jQuery
Javascript实现异步编程的过程
2018/06/18 Javascript
JS实现Cookie读、写、删除操作工具类示例
2018/08/28 Javascript
在vue中安装使用vux的教程详解
2018/09/16 Javascript
Vue分页器实现原理详解
2019/06/28 Javascript
使用CSS3实现多列布局与多背景的技巧
2016/02/29 HTML / CSS
播音主持女孩的自我评价分享
2013/11/20 职场文书
无故旷工检讨书
2014/01/26 职场文书
先进班级集体事迹材料
2014/01/30 职场文书
触摸春天教学反思
2014/02/03 职场文书
捐款倡议书怎么写
2014/05/13 职场文书
公关活动策划方案
2014/05/25 职场文书
环保口号大全
2014/06/12 职场文书
新闻人物通讯稿
2014/10/09 职场文书
公司放假通知范文
2015/04/14 职场文书
公司搬迁通知
2015/04/20 职场文书
名人传读书笔记
2015/06/26 职场文书
行政后勤人员工作计划应该怎么写?
2019/08/16 职场文书
golang slice元素去重操作
2021/04/30 Golang
Spring Bean是如何初始化的详解
2022/03/22 Java/Android