浅谈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 第三章章节总结的例子
Mar 23 Javascript
Jquery UI震动效果实现原理及步骤
Feb 04 Javascript
解析jquery中的ajax缓存问题
Dec 19 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
Nov 24 Javascript
分享10个优化代码的CSS和JavaScript工具
May 11 Javascript
vue中实现先请求数据再渲染dom分享
Mar 17 Javascript
JavaScript类数组对象转换为数组对象的方法实例分析
Jul 24 Javascript
记React connect的几种写法(小结)
Sep 18 Javascript
JSON基本语法及与JavaScript的异同实例分析
Jan 04 Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
May 06 Javascript
mpvue实现左侧导航与右侧内容的联动
Oct 21 Javascript
如何使用vue slot创建一个模态框的实例代码
May 24 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
PHP下escape解码函数的实现方法
2010/08/08 PHP
简单谈谈PHP面向对象之标识对象
2017/06/27 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
jQuery 锚点跳转滚动条平滑滚动一句话代码
2010/04/30 Javascript
DWR实现模拟Google搜索效果实现原理及代码
2013/01/30 Javascript
判断滚动条到底部的JS代码
2013/11/04 Javascript
javascript的alert box在java中如何显示多行
2014/05/18 Javascript
分享10个原生JavaScript技巧
2015/04/20 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
2016/05/15 Javascript
jquery实现无刷新验证码的简单实例
2016/05/19 Javascript
JavaScript实现通过select标签跳转网页的方法
2016/09/29 Javascript
JavaScript对象创建模式实例汇总
2016/10/03 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
2016/12/14 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
2017/07/21 Javascript
react-router v4如何使用history控制路由跳转详解
2018/01/09 Javascript
深入理解js 中async 函数的含义和用法
2018/05/13 Javascript
Vue隐藏显示、只读实例代码
2018/07/18 Javascript
ES6 系列之 WeakMap的使用示例
2018/08/06 Javascript
vue实现可视化可拖放的自定义表单的示例代码
2019/03/20 Javascript
JS实现马赛克图片效果完整示例
2019/04/13 Javascript
javascript实现页面的实时时钟显示示例
2020/08/06 Javascript
vue图片裁剪插件vue-cropper使用方法详解
2020/12/16 Vue.js
[57:31]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第一场 2月1日
2021/03/11 DOTA
python列表操作使用示例分享
2014/02/21 Python
python之wxPython应用实例
2014/09/28 Python
Python使用email模块对邮件进行编码和解码的实例教程
2016/07/01 Python
Python竟能画这么漂亮的花,帅呆了(代码分享)
2017/11/15 Python
Python cookbook(数据结构与算法)同时对数据做转换和换算处理操作示例
2018/03/23 Python
Django框架实现的简单分页功能示例
2018/12/04 Python
几个适合python初学者的简单小程序,看完受益匪浅!(推荐)
2019/04/16 Python
python GUI库图形界面开发之PyQt5日期时间控件QDateTimeEdit详细使用方法与实例
2020/02/27 Python
python 引用传递和值传递详解(实参,形参)
2020/06/05 Python
Python基于gevent实现文件字符串查找器
2020/08/11 Python
物流仓管员岗位职责
2013/12/04 职场文书
合作协议书模板
2014/10/10 职场文书
党支部审查意见
2015/06/02 职场文书