体彩排列五 www.8r31a.com.cn 体彩排列五 > 上网技巧 > 电脑小技巧 > 纯 js 实现跨域接口调用 jsonp

纯 js 实现跨域接口调用 jsonp

时间:2019-02-21 10:06 作者:QQ地带 我要评论

开发「www.8r31a.com.cn 个人即时到账收款平台」的时候,支付页面需要 poll轮询 查询订单状态。oicqzone 支付接口如下:接口地址:https://oicqzone.com/api/pay/aid  (在后台应用配置页面查看)
调用方法:POST
调用参数:
 - name, 必填, 订单销售商品名称
 - pay_type, 必填, 支付方式(可选alipay/wechat)
 - price, 必填, 订单价格
 - order_id, 必填, 订单号
 - order_uid, 必填, 订单购买用户(可以为空字符串,但是建议设置为购买用户编号,便于后续对账)
 - notify_url, 必填, 支付成功后回调地址
 - return_url, 必填, 支付成功后前台跳转地址(可以为空字符串)
 - sign, 必填, 将参数按 name + pay_type + price + order_id + order_uid + notify_url + return_url + app secret 顺序拼接后 MD5
 
注意:使用该接口的建议方法是:在你的产品付款接口后台构造好上面的参数,然后渲染一个自动提交的 form 返回给用户浏览器,
用户浏览器会 post 这些参数到 oicqzone,然后就会显示支付页面;
如果 api 后面加 ?format=json 那么返回结果就是 json 格式的,需要开发者自己展示付款二维码。
复制代码支付页面设计之初就是在 www.8r31a.com.cn 域名下面,如果要自己渲染支付页面就指定接口返回的内容为 json。但是有些开发者是后台直接请求支付页面,然后把支付页面的 html 的内容直接在自己的域名下面渲染给用户,这样,在开发者自己的域名下面,支付页面调用 www.8r31a.com.cn 的订单查询接口就会出现跨域问题。Failed to load https://oicqzone.com/: Redirect from 'https://oicqzone.com/' to '//www.8r31a.com.cn/' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://www.8r31a.com.cn' is therefore not allowed access.
复制代码为了避免这种问题,我们需要修改接口支持 jsonp 调用, 在服务端增加:        cb = self.get_argument('callback', None)
        if cb:
            return self.write('%s(%s)' % (cb, json.dumps({'status': od['status'] if od else 'not_exist'})))
复制代码callback 参数判断,如果传了 callback 参数,就把原本为 json 的格式转换成 callback(json) 这样。然后客户端修改,自己实现 jsonp 请求(如果是jQuery就比较简单):            var $jsonp = (function(){
              var that = {};
              that.send = function(src, options) {
                var callback_name = options.callbackName || 'callback',
                  on_success = options.onSuccess || function(){},
                  on_timeout = options.onTimeout || function(){},
                  timeout = options.timeout || 10; // sec
                var timeout_trigger = window.setTimeout(function(){
                  window[callback_name] = function(){};
                  on_timeout();
                }, timeout * 1000);
                window[callback_name] = function(data){
                  window.clearTimeout(timeout_trigger);
                  on_success(data);
                }
                var script = document.createElement('script');
                script.type = 'text/javascript';
                script.async = true;
                script.src = src;
                document.getElementsByTagName('head')[0].appendChild(script);
              }
              return that;
            })();
复制代码调用的时候就:                $jsonp.send("https://oicqzone.com/api/query/{{aoid}}?callback=cb&_=" + new Date().getTime(), {
                    callbackName: 'cb',
                    onSuccess: function(ret){
                        //do something
                    }
                });
复制代码这样就解决了跨域问题。
 
 

标签: JSONP
顶一下
(0)
0%
踩一下
(0)
0%

Google提供的广告

  • 萌萌哒童趣美食来袭 “六一”就给小朋友做这个 2019-05-22
  • 庆祝改革开放40年大型主题采访活动启动 2019-05-21
  • 山西出台“金融13条”扶持小微企业  2019-05-21
  • 2016中国大学理学一流学科排行榜:中国科学院大学第一 2019-05-21
  • 对中国,美国只剩下高等学校一个优势。中国应与日、俄、韩、澳实行联合办学机制,不足师资,一起把他们从美国挖过来,所正很多是移民过去的 2019-05-20
  • 候选企业:东方证券股份有限公司 2019-05-20
  • 高房价开始衍生出新一代的低欲望社会! 2019-05-20
  • 凤凰公映礼之《父子雄兵》 2019-05-19
  • 西安七旬老人拄拐到高考志愿咨询会 帮孙子看看报啥学校 2019-05-19
  • 晓港公园花卉馆南侧场地出租项目 2019-05-18
  • 段家寨岔上村党支部主题党日助脱贫 2019-05-18
  • 懒人科技的又一巅峰  “动作识别笔”让生活更便捷 2019-05-17
  • 三晋史话:曹操是如何统一山西的? 2019-05-17
  • 交通部发布端午假期出行指南 教你如何避堵 2019-05-16
  • 苦瓜-热门标签-华商生活 2019-05-16
  • 612| 622| 612| 477| 599| 667| 50| 754| 21| 295|