通过ajax的jsonp方式实现跨域访问,并处理响应

一、场景描述

现有一个项目A,需要请求项目B的某个接口,并根据B接口响应结果A处理后续逻辑。

二、具体实现

1、前端

前端项目A发送请求,这里通过jsonp的方式实现跨域访问。

html 复制代码
       $.ajax({    
            url:'http://10.10.2.256:8280/ssoCheck',   //请求的url地址
            data:{'userId':'1'}, //参数
            dataType:"jsonp",   //返回格式为json
            type:"GET",   //请求方式
            jsonpCallback:"successCallBack"//回调方法

        });

注意,需要指定jsonp的回调方法jsonpcallback,这里我设置的回调方法名为successCallBack,所以相应的 要定义一个successCallBack方法。

html 复制代码
function successCallBack(data){
        //后端返回接口
       if (data && data.code == '200'){
          //自己逻辑
       }
    }

2、 后端

后端需要注意返回的json格式,必须严格返回 successCallBack({}) 格式的。

(successCallBack也就是前端配置的回调方法名),否则回调方法无法执行。

3、效果展示

相关推荐
小李小李不讲道理4 分钟前
「Ant Design 组件库探索」二:Button组件
前端·react.js·ant design
互联网搬砖老肖1 小时前
Web 架构之 CDN 加速原理与落地实践
前端·架构
会飞的鱼先生1 小时前
javascript中Cookie、BOM、DOM的使用
前端·javascript·chrome
OpenTiny社区1 小时前
开源之夏·西安电子科技大学站精彩回顾:OpenTiny开源技术下沉校园,点燃高校开发者技术热情
前端·开源
多多*1 小时前
基于rpc框架Dubbo实现的微服务转发实战
java·开发语言·前端·redis·职场和发展·蓝桥杯·safari
灏瀚星空1 小时前
用HTML5 Canvas打造交互式心形粒子动画:从基础到优化实战
前端·html·html5
Jackson__2 小时前
聊一下HTTP 与 HTTPS 的区别,以及HTTPS 的加密方式
前端·面试
一抓掉一大把2 小时前
MiniExcel模板填充Excel导出
开发语言·javascript·ecmascript
好运yoo2 小时前
npm install的原理
前端·npm
Jiaberrr2 小时前
uniapp 安卓 APP 后台持续运行(保活)的尝试办法
android·前端·javascript·uni-app·app·保活