通过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、效果展示

相关推荐
拾忆,想起几秒前
Dubbo本地存根与本地伪装实战指南:提升微服务容错能力的利器
前端·微服务·云原生·架构·dubbo·safari
wuli_滔滔5 分钟前
DevUI弹窗体系重构:微前端场景下的模态管理策略
前端·重构·架构
前端老曹7 分钟前
vue-pdf-embed(Vue3实现pdf本地预览功能)
javascript·vue.js·pdf
fruge8 分钟前
Angular 17 新特性深度解析:独立组件 + 信号系统实战
前端·javascript·vue.js
卓码软件测评8 分钟前
第三方软件质量检测机构:【Apifox多格式支持处理JSON、XML、GraphQL等响应类型】
前端·测试工具·正则表达式·测试用例·压力测试
心随雨下11 分钟前
Flutter加载自定义CSS样式文件方法
前端·css·flutter
X***C86214 分钟前
SpringMVC 请求参数接收
前端·javascript·算法
GDAL16 分钟前
css实现元素居中的18种方法
前端·css·面试·html·css3·css居中
copyer_xyf19 分钟前
SQL 语法速查手册:前端开发者的学习笔记
前端·数据库·sql