首页 > 代码库 > 程序ajax请求公共组件app-jquery-http.js中url参数部分的项目应用
程序ajax请求公共组件app-jquery-http.js中url参数部分的项目应用
结合微信登录以及微信支付的案例:= =||| (案例比较奇葩复杂)
简述项目流程:
1.获取用于公众号支付的openid(公众平台):在微信内置浏览器中打开网页链接,刚进入页面就通过微信公众平台获取该微信用户的code,拿到code传给后台,换取用户的openid。
2.微信登录(开放平台):微信登录通过微信开放平台,由于第一步公众平台拿到的code会混淆开放平台的code,导致用户使用微信登录失败,就需要使用该插件将url参数重置。
3.微信支付(公众平台):像后台传输步骤一获取的openid,以及其他参数,完成微信公众号支付。
代码如下:
1.获取用于公众号支付的openid:
1 $(function() { 2 3 function isWeiXin() { //判断是否为微信环境 4 var ua = window.navigator.userAgent.toLowerCase(); 5 if(ua.match(/MicroMessenger/i) == ‘micromessenger‘) { 6 return true; 7 } else { 8 return false; 9 }10 }11 if(isWeiXin()) { //只在微信环境中获取openid,普通的浏览器也获取不到啊!12 var openid = $.cookie("geekbar_weixinid"); // Jquery-cookie插件用于存储获取到的openid,一开始这里肯定是null。13 if(openid != null && openid != ‘‘) {14 return;15 }16 var code = $.HTTP.getUrlParam("code"); //获取当前页面链接中的参数code!一开始这里肯定是null。17 if(code == undefined || code == null) { 18 var sendUrl = location.href; //redirect_uri(授权后重定向的回调链接地址):当前页面。19 sendUrl = $.HTTP.setUrlParam(sendUrl,"xz","public"); //给当前页面的url添加一个参数xz=public,提示是公众平台,避免与开放平台搞混淆。
//拼接后的地址(例):www.baidu.com?xz=public,对链接本身没有任何影响。20 sendUrl = encodeURIComponent(sendUrl); //处理该地址为格式要求的样式,点击查看微信公众平台文档要求。21 22 //var sendUrl = encodeURIComponent(location.href);23 var requrl = ‘https://open.weixin.qq.com/connect/oauth2/authorize?appid=appid&redirect_uri=‘ +24 sendUrl + ‘&response_type=code&scope=snsapi_base&state=wx#wechat_redirect‘;25 26 location.href =http://www.mamicode.com/ requrl; //刷新后页面链接后便拼接了公众平台获取的code,同时进入else27 return;28 29 } else {30 31 $.ajax({32 url: ‘../common/user/wx/getopenid?code=‘ + code, //将公众平台code传给后台,获取用于公众号支付的openid33 success: function(data) {34 $.cookie("geekbar_weixinopenid", data.data, { //成功后将openid(代码中的data.data)存入缓存中去。使用jquery-cookie插件。35 expires: 136 });37 },38 error: function(XMLHttpRequest, textStatus, errorThrown) {39 var info = "XMLHttpRequest:" + JSON.stringify(XMLHttpRequest) +40 " ;textStatus:" + textStatus + "; errorThrown:" +41 JSON.stringify(errorThrown) + "; 【" + opt.url + "】";42 alert(info);43 if(opt.error != undefined)44 opt.error(XMLHttpRequest, textStatus, errorThrown);45 else {46 console.error("请求错误", "系统发生请求错误,请联系管理员解决。");47 }48 }49 });50 51 }52 53 } else {54 console.log("当前环境不是微信环境")55 }56 57 });
2.微信登录(开放平台)
1 $("#wchartLogin").on("click", function() { 4 var sendUrl = location.href; //受到步骤一的影响,页面链接后拼接的是公众平台获取的code,xz参数。即xxxx.jsp?code=publiccode&xz=public&state=wx 5 sendUrl = $.HTTP.setUrlParam(sendUrl, "xz", "open"); //重置xz参数:xxxx.jsp?code=publiccode&xz=open&sate=wx 6 sendUrl = $.HTTP.deleteUrlParam(sendUrl, "code"); //删除公众平台code参数:xxxx.jsp?xz=open&state=wx (最为重要,是混淆开放平台code的元凶!) 7 sendUrl = $.HTTP.deleteUrlParam(sendUrl, "state"); //删除state参数:xxxx.jsp?xz=open 8 sendUrl = $.HTTP.setUrlParam(sendUrl, "ls", "wx"); //增添ls参数:xxxx.jsp?xz=open&ls=wx (后台设置的,没有此参数不行) 9 sendUrl = encodeURIComponent(sendUrl); //处理成redirect_uri的标准格式。10 requrl = ‘https://open.weixin.qq.com/connect/oauth2/authorize?appid=appid&redirect_uri=‘ + sendUrl + ‘&response_type=code&scope=snsapi_login&state=wx#wechat_redirect‘;11 location.href =http://www.mamicode.com/ requrl; //就可以成功登录了!12 return; 13 });
3.微信支付(公众平台):
1 <input type="radio" value="http://www.mamicode.com/WeiXinPub" name="payType" checked="checked">
1 <script> 2 $(function(){ 3 $("#payFBtn").on("click",function(){ 4 var payType=$("#payChooseList input[name=payType]:checked").val(); 5 if(payType==undefined||payType==null||payType==‘‘){ 6 alert("请选择支付类型!"); 7 return; 8 } 9 pay(‘{{orderNo}}‘,payType);10 })11 12 })13 </script>
1 function pay(orderNo, payChannel) { 2 $.HTTP.obj({ 3 url: "../rest/order/pay", 4 ajaxData: { 5 orderNo: orderNo, 6 payChannel: payChannel, 7 wxOpenId: $.cookie("geekbar_weixinid"), //将获取到的公众平台的openid传给后台。只有有用户openid才能支付。 8 success_url: encodeURI(location.href) 9 },10 success: function(data) {11 12 if(data) {13 switch(payChannel) {14 15 case "AlipayWap":16 17 var pos = JSON.stringify(data);18 pingpp.createPayment(pos, function(result, err) {19 alert(result);20 alert(err.msg);21 alert(err.extra);22 if(result == "success") {23 24 } else if(result == "cancel") {25 26 }27 });28 break;29 30 case "WeiXinPub":31 var pos = JSON.stringify(data);32 33 pingpp.createPayment(pos, function(result, err) {34 /*alert(result);35 alert(err.msg);36 alert(err.extra);*/37 if(result == "success") {38 //alert(result);39 } else if(result == "fail") {40 alert(err.msg);41 // charge 不正确或者微信公众账号支付失败时会在此处返回42 } else if(result == "cancel") {43 // 微信公众账号支付取消支付44 result = ‘您已取消支付‘;45 alert(result);46 }47 });48 break;49 50 }51 52 } else {53 alert("支付异常");54 }55 56 }57 })58 }
程序ajax请求公共组件app-jquery-http.js中url参数部分的项目应用
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。