程序ajax请求公共组件app-jquery-http.js中url参数部分的项目应用

结合微信登陆以及微信支付的案例:= =||| (案例比较奇葩复杂)jquery

简述项目流程:ajax

1.获取用于公众号支付的openid(公众平台):在微信内置浏览器中打开网页连接,刚进入页面就经过微信公众平台获取该微信用户的code,拿到code传给后台,换取用户的openid。api

2.微信登陆(开放平台):微信登陆经过微信开放平台,因为第一步公众平台拿到的code会混淆开放平台的code,致使用户使用微信登陆失败,就须要使用该插件将url参数重置。浏览器

3.微信支付(公众平台):像后台传输步骤一获取的openid,以及其余参数,完成微信公众号支付。缓存

代码以下:微信

1.获取用于公众号支付的openid:cookie

 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 = requrl; //刷新后页面连接后便拼接了公众平台获取的code,同时进入else 27 return; 28 29 } else { 30 31 $.ajax({ 32 url: '../common/user/wx/getopenid?code=' + code, //将公众平台code传给后台,获取用于公众号支付的openid 33 success: function(data) { 34 $.cookie("geekbar_weixinopenid", data.data, { //成功后将openid(代码中的data.data)存入缓存中去。使用jquery-cookie插件。 35 expires: 1 36 }); 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.微信登陆(开放平台)app

 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 = requrl; //就能够成功登陆了! 12         return; 13     });

 

3.微信支付(公众平台):微信公众平台

1 <input type="radio" value="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 }
相关文章
相关标签/搜索